react 引入 store和reducers

在React应用中引入store和reducers是为了管理应用程序的状态。Redux是一个流行的状态管理库，它提供了一种集中式的方式来存储和更新整个应用的数据。

1. **Store**: 可以理解为状态容器，它是Redux的核心组件，负责维护单一来源（单向数据流）的应用状态。通过`createStore()`函数创建一个store，并可以将reducer注册到这个store上。

import { createStore } from 'redux';
const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
  // 根据action类型处理状态变化
  // ...
};
const store = createStore(reducer);

2. **Reducers**: 是纯函数，接收当前的状态(state)和一个action，然后返回新的状态。它们用于描述当接收到某个特定的动作时，如何改变状态。通常以函数签名`function(state, action)`的形式编写。

function increment() {
  return { type: 'INCREMENT', payload: 1 };
}
function decrement() {
  return { type: 'DECREMENT', payload: -1 };
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + action.payload };
    case 'DECREMENT':
      return { ...state, count: state.count - action.payload };
    default:
      return state;
  }
};

当你想更改状态时，只需要dispatch相应的action到store，store会自动调用对应的reducer并更新状态。