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/...