Redux的使用

Redux除了和React一起用外，还支持其它界面库。所以我们可以单独对Redux进行使用，在熟悉Redux的使用后我们再结合React进行使用。

首先我们新建一个文件夹learn_redux，新建文件index.js。为了方便使用Redux我们使用指令yarn init创建package.json文件，在文件创建完成后通过yarn add redux引入Redux。文件目录如下图所示：

接下来我们在index.js文件中导入Redux，此时注意不建议通过ES6的方式导入，因为当前是node.js执行，受限于node部分版本无法识别ES6模块化；v13.2.0后开始支持识别。我们通过如下方式导入Redux:

然后我们可以开始使用Redux，完成如下简单demo的实现：

const redux = require('redux');

const inittalState = {
    counter: 0
}

// reducer
function reducer(state = inittalState, action) {
    switch (action.type) {
        case "INCREMENT":
            return { ...state, counter: state.counter + 1 }
        case "DECREMENT":
            return { ...state, counter: state.counter - 1 }
        case "ADD_NUMBER":
            return { ...state, counter: state.counter + action.num }
        case "SUB_NUMBER":
            return { ...state, counter: state.counter - action.num }
        default:
            return state;
    }
}

// store(创建时需要传入reducer)
const store = redux.createStore(reducer);

// 订阅store的修改
store.subscribe(() => {
    console.log("state发生了改变:",store.getState().counter)
})

// action
const action1 = { type: "INCREMENT" };
const action2 = { type: "DECREMENT" };
const action3 = { type: "ADD_NUMBER", num: 5 };
const action4 = { type: "SUB_NUMBER", num: 5 };

// 派发
store.dispatch(action1);
store.dispatch(action2);
store.dispatch(action3);
store.dispatch(action4);

运行代码我们可以看到counter值已经被修改：