Redux基础知识

2023-09-06 18:40:20

Redux 是 JavaScript 中最流行的状态管理库之一，尤其是用于 React 项目。它使您可以轻松地在整个应用程序中管理状态，并使您的应用程序更易于测试和维护。

Redux 基本概念

状态：Redux 应用程序的状态是应用程序中所有数据的一个单一对象。它包含应用程序中所有组件所需的所有数据。
动作：动作是应用程序状态更改的对象。动作具有类型和有效负载两个属性。类型是动作的名称，有效负载是动作携带的任何数据。
reducer ：reducer 是一个函数，它接受当前状态和动作，并返回一个新状态。reducer 用于更新应用程序的状态。
存储：存储是保存应用程序状态的对象。它允许组件访问应用程序状态，并允许 reducer 更新应用程序状态。

使用 Redux

要使用 Redux，您需要在应用程序中安装 Redux 库。然后，您需要创建一个 Redux 存储。存储是一个 JavaScript 对象，它包含应用程序的状态。

import { createStore } from 'redux';

const store = createStore(reducer);

接下来，您需要创建一个 reducer 函数。reducer 函数是纯函数，这意味着它不会产生副作用，并且它总是返回相同的结果，给定相同的输入。

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

最后，您需要将 Redux 存储连接到您的 React 应用程序。这可以通过使用 Provider 组件来完成。

import React from 'react';
import { Provider } from 'react-redux';

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

Redux 异步操作

Redux 还允许您执行异步操作。这可以通过使用中间件来完成。中间件是 Redux 存储中的函数，它可以拦截和修改动作。

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

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

Thunk 是一个中间件，它允许您在动作中分派函数。这使您可以轻松地执行异步操作，例如从服务器获取数据。

function fetchUsers() {
  return (dispatch) => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => dispatch({ type: 'USERS_LOADED', payload: data }));
  };
}