从一个初学者的角度来剖析：

Redux是干啥用的呢？
学习Redux之前要理解什么？
理论我的项目中如何用到（针对小白）
状态治理和hooks有什么关系?

问题3：理论我的项目中如何用到（针对小白）

实现这样一个性能：点击Increase的话右边数字加1，点击Decrease每次减1

首先创立这个组件

class Counter extends Component {  render() {    const { value, onIncreaseClick, onDecreaseClick } = this.props    return (      <div>        <span>{value}</span>        <button onClick={onIncreaseClick}>Increase</button>        <button onClick={onDecreaseClick}>Decrease</button>      </div>    )  }}

Action ：Action 是把数据从利用传到 store 的有效载荷。它是 store 数据的惟一起源。一般来说你会通过 store.dispatch() 将 action 传到 store。Action 实质上是 JavaScript 一般对象。咱们约定，action 内必须应用一个字符串类型的 type 字段来示意将要执行的动作。

// Actionconst increaseAction = { type: 'increase' } const decreaseAction = { type: 'decrease' }

Reducers : Reducers 指定了利用状态的变动如何响应 actions 并发送到 store 的，记住 actions 只是形容了有事件产生了这一事实，并没有形容利用如何更新 state。

// 确定state构造，这个简略的我的项目只用到了state = { count: 0 }// Reducer作用： (previousState, action) => newState// 性能是批改count值，能够减少或者缩小function counter(state = { count: 0 }, action) {  const count = state.count  switch (action.type) {    case 'increase':      return { count: count + 1 }    case 'decrease':      return { count: count - 1 }    default:      return state  }}

Store ： Store 就是把action和reducer分割到一起的对象。Redux 利用只有一个繁多的 store，当须要拆分数据处理逻辑时，你应该应用 reducer 组合 而不是创立多个 store。Store 有以下职责：

  • 维持利用的 state；
  • 提供 getState() 办法获取 state；
  • 提供 dispatch(action) 办法更新 state；
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数登记监听器。
// Storeconst store = createStore(counter)// 发动action的办法能够是// store.dispatch(counter('increase')

搭配React ： Redux 的 React 绑定库是基于 容器组件和展现组件相拆散 的开发思维，容器组件形容如何运行，展现组件形容如何展示，应用 React Redux 的 connect() 办法来生成容器组件。容器组件把展现组件和 Redux 关联起来。技术上讲，容器组件就是应用 store.subscribe() 从 Redux state 树中读取局部数据，并通过 props 来把这些数据提供给要渲染的组件。

// Map Redux state to component propsfunction mapStateToProps(state) {  return {    value: state.count  }}// Map Redux actions to component propsfunction mapDispatchToProps(dispatch) {  return {    onIncreaseClick: () => dispatch(increaseAction),    onDecreaseClick: () => dispatch(decreaseAction)  }}
// 这个函数来指定如何把以后 Redux store state 映射到展现组件的 props 中。如果定义该参数，组件将会监听 Redux store 的变动。任何时候，只有 Redux store 产生扭转，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。 // mapDispatchToProps 容器组件还能散发 action。，接管 dispatch() 办法并返回冀望注入到展现组件的 props 中的回调  办法。const App = connect( mapStateToProps, mapDispatchToProps )(Counter)

创立完之后能够看下在react-router中怎么利用的

ReactDOM.render(  <Provider store={store}>      <App />  </Provider>,  document.getElementById('root'))

参考链接：
根底：https://www.redux.org.cn/docs...

我的项目链接： https://github.com/jackielii/...