在下⾯的场景中，引⼊
Redux
是⽐较明智的：
1、你有着相当⼤量的、随时间变化的数据；
2、你的
state
需要有⼀个单⼀可靠数据来源；
3、你觉得把所有
state
放在最顶层组件中已经⽆法满⾜需要了。
4、某个组件的状态需要共享。
安装redux
npm install redux --save
⽤⼀个累加器举例
1.
需要⼀个
store
来存储数据
2. store
⾥的
reducer
初始化
state
并定义
state
修改规则
3.
通过
dispatch
⼀个
action
来提交对数据的修改
4. action
提交到
reducer
函数⾥，根据传⼊的
action
的
type
，返回新的
state
创建store，src/store/ReduxStore.js
import {createStore} from 'redux'
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'ADD':
return state + 1
case 'MINUS':
return state - 1
default:
return state
}
}
const store = createStore(counterReducer)
export default store
创建ReduxPage
import React, { Component } from "react";
import store from "../store/ReduxStore";
export default class ReduxPage extends Component {
componentDidMount() {
store.subscribe(() => {
console.log("subscribe");
this.forceUpdate();
//this.setState({});
});
}
add = () => {
store.dispatch({ type: "ADD" });
};
minus = () => {
store.dispatch({ type: "MINUS" });
};
render() {
console.log("store", store);
return (
<div>
<h3>ReduxPage</h3>
<p>{store.getState()}</p>
<button onClick={this.add}>add</button>
<button onClick={this.minus}>minus</button>
</div>
);
}
}
还可以在
src/index.js
的
render
⾥订阅状态变更
import store from './store/ReduxStore'
const render = ()=>{
ReactDom.render(
<App/>,
document.querySelector('#root')
)
}
render()
store.subscribe(render)
1. createStore
创建
store
2. reducer
初始化、修改状态函数
3. getState
获取状态值
4. dispatch
提交更新
5. subscribe
变更订阅
原文：视频笔记
