redux使用筆記

學習react之使用redux實現todoList

在學習完react基礎知識後，就用簡單的一個小例子來稍微實戰下，以前沒有系統的學習過如今從新來過，一步步瞭解react的相關知識。react是一個js庫，提倡組件化編寫代碼，能夠把項目分紅多個組件組成一個小的項目，自己只是一個js庫，數據與UI分開的模式使得更便於維護以及多人開發，初開始用的時候會以爲很麻煩，儘管只是一個小功能都會分爲好幾個部分，真正習慣了以後會發現想當的便捷，如今咱們就從一個簡單todoList開始。

這個實例主要是爲了熟悉 redux因此最基礎的內容可能須要你們稍微瞭解下react官網的內容，基礎知識要稍微知道點.

技術棧

• react
• redux
• redux-thunk
• react-redux
• antd

開始初始化項目

這裏開始初始化一個項目，使用的是create-react-app,運行 npm install create-react-app -g全局安裝，而後運行
create-react-app demo 建立一個名爲demo 的react項目，這裏是會直接下載依賴的因此能夠直接運行npm start啓動項目，
到這裏就已經成功建立並啓動了一個react項目.

而後安裝redux的相關依賴，運行npm install --save redux redux-thunk react-redux antd，這裏的redux是爲了統一管理組件的數據，將全部的
state數據存儲在一個單一的數據源store內部，至關於就是一個全局對象。redux-thunk是redux的中間件，至關於一個對redux的加強，redux只能處理同步的數據，所以
涉及到異步的數據就須要這個中間件進行處理了.react-redux是爲了將react和redux聯合起來的，由於這兩個庫是獨立的，須要使用這個庫對他們進行綁定，是react的組件
可以從redux store中讀取數據，而且想store分發action 以更新數據

正式的代碼

入口的代碼

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom';

import * as serviceWorker from './serviceWorker';
// todoList組件
import TodoList from './TodoList'

import { Provider } from 'react-redux'
// 獲取store的數據
import store from './store/index'

ReactDOM.render(
    // 這裏的provider就是react-redux提供的組件，可以使其子組件都能訪問到store中的數據
    <Provider store={store}><TodoList /></Provider>, document.getElementById('root'));


serviceWorker.unregister();

store的初始化代碼

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'

import reduce from './reduce/index'

// 這是加強函數，__REDUX_DEVTOOLS_EXTENSION_COMPOSE__是爲了可以使用redux devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose
 
// 建立store而且使用redux-thunk中間件
const store = createStore(reduce,composeEnhancers(applyMiddleware(thunk)))


export default store

而後就是建立reducer

// src/store/reduce/todo.js

// 引入定義的常量
import { ADD_ITEM, CHANGE_INPUT, DELETE_ITEM } from '../actionTypes'

// 默認數據
const defaultState = {
    inputValue: 'aabb',
    list: ['列表一','第二項']
}

// 輸出reducer，其實就是一個函數，根據aciton修改state，由於store中的數據只容許在reducer中修改
export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state))
    switch (action.type){
        case CHANGE_INPUT:
            newState.inputValue = action.value;
            return newState;
        case ADD_ITEM:
            newState.list = [...newState.list,newState.inputValue]
            newState.inputValue = ''
            return newState
        case DELETE_ITEM:
            newState.list.splice(action.index,1)
            return newState
        default:
            return state;
    }
}

而後就是如何在todoList組件中使用這些store中的數據了

import React, { Component } from 'react';
// 使用antd一個UI庫，推薦按需引入
import { Button, Input, List } from 'antd'
import 'antd/dist/antd.css'

// 在入口處咱們使用了react-redux的Provider，在組件中要使用connect使他們關聯起來，而後組件中就能使用store數據了
import { connect } from 'react-redux'

// 組件中會把全部對stroe數據的改動的函數提取出來做爲單獨的一個文件分開來寫，方便維護，這些函數是要註冊到connect中的
import { changeInput, addItem, deleteItem } from './store/actions/todo'

class TodoList extends Component{
    render(){
        // 引入provider傳入的store中的數據，這裏包含state數據也包含對數據處理的函數
        const { inputValue, list, changeInput, addItem, deleteItem } = this.props
        return (
            <div>
                <div>
                    <Input value={inputValue} style={{width: '300px',margin: '30px'}} onChange={changeInput}></Input>
                    <Button onClick={addItem}>增長</Button>
                </div>
                <ul>
                    {
                        list.map((item,index) =>{
                            return (
                                <li key={index} onClick={() => deleteItem(index)}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}


const stateToProps = (state) => {
    return {
        inputValue: state.todo.inputValue,
        list: state.todo.list
    }
}

// connect包含的兩個參數，第一個是state中處理的數據，第二個是action creaters構成的對象，就是對數據處理的函數構成的對象。
// connect返回一個函數用來接收一個待包裝的組件
export default connect(stateToProps, { changeInput, addItem, deleteItem })(TodoList)

完整代碼請參考github地址