首先创建一个,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的诞生显得理所当然了