反应 Redux 备忘单

本备忘单涵盖了 Redux 中的基本概念和常用语法。它可以作为您在学习 Redux 时的参考。如果您已经熟悉 Redux，您可以跳过一些部分。

概念

Action（动作）

一个包含 type 属性的 JavaScript 对象。type 描述了这个动作的类型。Action 还可以包含其他的属性。

Reducer（减速器）

一个函数，接收当前的状态（state）和一个 action，返回新状态（new state）。

Store（存储）

一个保存应用程序状态的地方。它包含了当前状态（current state），它的 reducer 和 middleware。

Middleware（中间件）

一个洋葱模型流水线。它包括了一些功能，可以在一个 action 调用 reducer 之前或之后执行。

Dispatcher

一个函数，接收一个 action 并将它传递给 reducer 和 middleware。

Subscriber

一个函数或对象，用于监听 store 的变化。

入门

安装

您可以使用以下命令在项目中安装 Redux：

$ npm install --save redux

或者，您可以使用以下命令在项目中安装 React-Redux：

$ npm install --save react-redux

创建 store

您可以使用 createStore 方法创建一个 store：

import { createStore } from 'redux';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'SOME_ACTION':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

更新 state

您可以使用 store.dispatch 方法将 action 分发给 reducer：

store.dispatch({
  type: 'SOME_ACTION',
  payload: 'Hello, World!'
});

获取 state

您可以使用 store.getState() 方法获取当前的状态：

const state = store.getState();

监听变化

您可以使用 store.subscribe 方法监听状态的变化：

store.subscribe(() => {
  console.log(store.getState());
});

应用中间件

您可以使用 applyMiddleware 方法来应用 middleware：

import { applyMiddleware, createStore } from 'redux';

const logger = store => next => action => {
  console.log('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  return result;
}

const store = createStore(reducer, applyMiddleware(logger));

React-Redux

提供器和容器

您可以使用提供器（Provider）来将 store 提供给您的 React 应用程序。您可以使用容器（Container）来包装组件并将 state 或 action 作为属性传递给它们。

import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'SOME_ACTION':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

const MyComponent = ({ data }) => {
  return <div>{data}</div>;
};

const MyContainer = connect(
  state => ({ data: state.data })
)(MyComponent);

const App = () => {
  return (
    <Provider store={store}>
      <MyContainer />
    </Provider>
  );
};

结论

Redux 是一个非常强大的状态管理工具。它可以帮助您更好地组织和管理您的应用程序状态。如果您还不熟悉 Redux，那么理解这些概念和语法是非常重要的。