Redux的运作原理及其应用

2023-11-05 05:42:49

Redux是一个可预测状态容器，主要用于JavaScript应用中管理全局状态。它使状态变化变得可预测和易于调试。其核心概念包括store、action、reducer等。

Store

Store是整个应用的状态存储器。可以使用createStore()函数创建一个store实例。每个Redux应用只有一个单一的store，且store保存了所有组件的状态。

import { createStore } from 'redux';
const store = createStore(reducer);

Action

Action是一个用来描述事件的对象，包含类型（type）和数据（payload）。它告诉store需要进行何种变化，并传递给reducer来决定新状态如何生成。一个action创建函数的例子如下：

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text,
  };
}

Reducer

Reducer是一个纯函数，接收当前state和action作为参数，返回新的state。它是Redux的核心部分，用来计算并更新状态。

const initialState = { todos: [] };

function todoApp(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      });
    default:
      return state;
  }
}

Redux的使用步骤

构建一个Redux应用包括创建store、定义action和reducer，然后将它们连接到React组件。

安装Redux及React-Redux库

在项目中安装必要的依赖：

npm install redux react-redux --save

创建Store并提供给React组件

利用Provider组件从最顶层传递store至整个应用，使所有组件都能访问状态数据。通常，在主文件里创建store，并将其包裹在一个顶级组件内。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      {/* 应用的其他组件 */}
    </Provider>,
    document.getElementById('root')
  );
};

创建Action Creators

编写action creators，以便向应用发送特定类型的action。如上所示，addTodo()就是一个action creator。

定义Reducer

定义一个或多个reducer来处理不同种类的state更新，并将这些reducer通过combineReducers()组合起来以支持复杂的应用逻辑。

import { combineReducers } from 'redux';
const rootReducer = combineReducers({
  todos: todoApp,
});

连接React组件到Redux

使用connect()函数或Hooks（如useSelector和useDispatch）来使组件能够访问state以及分派action。例如：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function TodoApp() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  return (
    // 使用todos和dispatch操作UI
  );
}