理解 redux 思想（一）

首先创建一个，store这个是必须的

import { createStore } from 'redux';

import reducer  from './reducer'

const store = createStore(reducer);

reducer为一个函数，是我们定义的一些规则，而这些规则可以改变 state 的一个函数，和vuex的mutations 是一个道理，它接受两个参数，第一个参数是 state，第二个参数为 actions, 即我们传参需要的一些数据

reducer 的代码如下

const reducer = (state = 0, action) => {
    switch (action.type) {
        case 'ADD':
            return state + action.value;
        default:
            return state;
    }
};

export default reducer

这样我们就得到了 state ，在控制台中打印一下state，得到：

接下来，说一下 dispatch ， getState, subscribe

第一、 store.getState 是获取 state 的一个函数，执行这个函数获取当前状态下得，一系列值

执行这个函数，相当于vuex的state

let state = store.getState();

第二、store.dispatch 这个函数是唯一改变 state 值得一个函数

这个函数相当于vuex 的actions

// 改变
store.dispatch({
    type: 'ADD',
    value: '2'
})

console.log(state)   // 0

执行这个步骤之后，打印的结果发现，依然是0 ，因此我们需要手动再执行一个getState 这个函数

store.dispatch({
    type: 'ADD',
    value: '2'
})
console.log(state)   // 0
state = store.getState();

console.log(state)  // 2

虽然这样可以得到我们想要的state，但是每次我们都改变状态的时候，都要调用getState这个函数，实在是太过麻烦

于是引入了 subscribe

第三、store.subscribe这个函数，是store的值，只要一发生变化的话，就会自动执行这个函数，即更新视图

const Counter = ({ value }) => (
    <h1>{value}</h1>
);

const render = () => {
    ReactDOM.render(
        <Counter value={store.getState()}/>,
        document.getElementById('root')
    );
};

store.subscribe(render);
render();

总结：这样虽然可以更新视图，但是在 react 中，路由之间传递props，可以通过动态创建组件，然后再给组件设置props 等思路来实现，但是总是感觉不太方便，因此在使用react的时候，react-redux的诞生显得理所当然了

理解 redux 思想 （一）

猜你喜欢

理解 redux 思想（一）