react redux學習(一)

項目目錄

一、安裝redux yarn add redux

二、建立store

1. 列表項目建立store文件夾
2. 文件夾下建立index.js
3. index.js

import { createStore } from 'redux';
         const store = createStore();
         export default store;

三、建立reducer.js

const defaultState = {
            inputValue:""
        }
        export default (state = defaultState,action) => { return state }

reducer必須是純函數，純函數給定輸入，固定輸出，而且不能改變輸入

五、store中如何獲取reducer的數據，及改變

//index.js作以下修改
    import { createStore } from 'redux';
    import reducer from './reducer'
    const store = createStore(reducer);
    export default store;

六、組件中如何獲取store數據

• 組件中引入store文件下的index.js
• 在constructor中 this.state = store.getState();

七、如何改變store的數據

• 建立action const action = { type:'input_action',val:val};
• store.dispatch(action) -> store ->reducer改變store數據 返回一個新的state數據

八、如何監聽 store的數據改變，刷新dom

• 組件中的constructor使用 store.subscribe(this.listener.bind(this));
• listener () { this.setState(store.getState())};

九、優化action的type,報錯能夠定位

• 建立actionTypes.js
• export const CHANGE_INPUT_VALUE = "change_input_value";

十、優化actionCreator.js,統一管理組件的action

import { CHANGE_INPUT_VALUE} from './actionTypes'
    export const changeFocuse = (inputValue) => ({
        type:CHANGE_INPUT_VALUE,
        inputValue
    });

十一、優化reducer.js

import { CHANGE_INPUT_VALUE} from './actionTypes'
    const defaultState = {
        inputValue:""
    }
    export default (state = defaultState,action) => { 
        switch (action.type){
            case CHANGE_INPUT_VALUE:
                const newState = JSON.parse(JSON.stringify(state));
                newState.inputValue = action.inputValue;
                return newState;
            default:
                return state
        }
    }