关于redux:Redux学习笔记

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

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 字段来示意将要执行的动作。

// Action
const 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) 返回的函数登记监听器。

// Store
const 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 props
function mapStateToProps(state) {
  return {value: state.count}
}

// Map Redux actions to component props
function 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/…