1.  Redux 是什么

- Redux 是一個狀態(tài)管理庫，它可以幫助你管理應(yīng)用程序中的所有狀態(tài)（如 UI、網(wǎng)絡(luò)請求、授權(quán)狀態(tài)等）。
- Redux 采用了單向數(shù)據(jù)流的架構(gòu)，意味著狀態(tài)更新是通過分發(fā) action 給 reducer 來實現(xiàn)的，這個 reducer 會根據(jù) action 返回一份新的狀態(tài)。
- Redux 的主要思想是“Store 保存應(yīng)用的完整狀態(tài)，Action 是把數(shù)據(jù)從應(yīng)用（即 UI 層）傳到 Store 的有效載荷，Reducer 定義了應(yīng)用狀態(tài)的變化如何響應(yīng) Action 并發(fā)送到 Store”。

2. Redux 的基礎(chǔ)概念

2.1 Store：存儲應(yīng)用程序狀態(tài)的容器。

Redux的核心概念之一是Store，它表示整個應(yīng)用程序的狀態(tài)。Store是一個存儲JavaScript對象的容器，表示應(yīng)用程序的當(dāng)前狀態(tài)。它可以被認為是一個大型全局變量，存儲著應(yīng)用程序的所有數(shù)據(jù)。

Redux Store也提供了一些有用的方法，來獲取和更新應(yīng)用程序的狀態(tài)。例如，getState()方法可以用來檢索應(yīng)用程序的當(dāng)前狀態(tài)，而dispatch()方法可以用來調(diào)度action以更新狀態(tài)。

創(chuàng)建一個Redux Store的基本步驟是：

1.定義一個reducer函數(shù)，用于處理各種action類型并更新應(yīng)用程序狀態(tài)。
2.使用該reducer函數(shù)創(chuàng)建一個Store，通過createStore函數(shù)完成此操作。
3.將Store與你的React組件或其他JavaScript代碼連接起來，以便你的應(yīng)用程序可以讀取和更新狀態(tài)。這可以通過在React應(yīng)用程序中使用高階組件（如connect）或原始JavaScript中的getState和dispatch方法完成。

2.2 Action：一個對象，用于描述發(fā)生的事件和相關(guān)數(shù)據(jù)（例如，用戶點擊按鈕）。

在Redux中，Action是描述應(yīng)用程序發(fā)生了什么操作的普通JavaScript對象。它代表應(yīng)用程序中的一些事件，如用戶交互或網(wǎng)絡(luò)請求的結(jié)果，并且指示應(yīng)用程序該如何響應(yīng)這些事件。Action對象必須具有一個type屬性，以指示要執(zhí)行的操作類型。

例如，可以在Redux中定義如下的Action對象：

const addTodo = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
    completed: false
  }
}

在這個例子中，`addTodo`是一個Action對象，它代表要執(zhí)行的操作是向列表中添加一個新的待辦事項。它包含一個類型為`ADD_TODO`的type屬性，以及一個payload屬性，其中包含要添加的新事項的信息。

Action對象通常是由應(yīng)用程序中的用戶交互或一些異步事件（如HTTP響應(yīng)）觸發(fā)的。當(dāng)Action被觸發(fā)時，應(yīng)用程序需要將它發(fā)送到Redux Store中，以便Store可以更新應(yīng)用程序的狀態(tài)并通知所有已連接的React組件。

可以通過在Redux中使用`dispatch`函數(shù)來發(fā)送Action對象。`dispatch`函數(shù)是一個Store對象的方法，它接收一個Action對象作為輸入，并在Store中處理該操作。然后Store更新應(yīng)用程序的狀態(tài)，然后通知所有已連接的組件，以便它們可以提取更新后的狀態(tài)并進行重新渲染。

2.3 Reducer：一個純函數(shù)，接收當(dāng)前狀態(tài)和 action，返回新的狀態(tài)。

在Redux中，Reducer是用于管理應(yīng)用程序狀態(tài)的純函數(shù)。Reducer函數(shù)接收兩個參數(shù)：當(dāng)前狀態(tài)(state)和一個Action對象，然后返回新狀態(tài)。Reducer函數(shù)不會修改原始狀態(tài)，而是根據(jù)Action對象生成新狀態(tài)。

Reducer通常被拆分成多個小函數(shù)，每個函數(shù)負責(zé)處理應(yīng)用程序狀態(tài)中的特定部分。這樣做可以使Reducer更加可維護和可測試，因為每個Reducer函數(shù)都只處理一小部分狀態(tài)。

Redux中Reducer函數(shù)的基本結(jié)構(gòu)：

function myReducer(state = initialState, action) {
  switch(action.type) {
    case 'SOME_ACTION':
      // change state and return the new state
      return newState;
    default:
      // if action type is not matched, return the current state
      return state;
  }
}

在這個例子中，`myReducer`是一個Reducer函數(shù)。它接收當(dāng)前狀態(tài)（`state`）和一個Action對象作為輸入。如果Action的類型與`SOME_ACTION`匹配，Reducer會通過改變狀態(tài)生成新狀態(tài)（`newState`）并將其返回。否則，Reducer將保留當(dāng)前狀態(tài)并返回它。

使用Reducer可以使應(yīng)用程序狀態(tài)管理更加清晰和可預(yù)測。它把所有狀態(tài)變更的邏輯都放在單獨的函數(shù)中，這樣調(diào)試和測試變得更加容易。同時，它也有助于應(yīng)用程序的可擴展性和可維護性。

2.4 Dispatch：一個函數(shù)，用于分發(fā) action。

在Redux中，Dispatch是一個Store對象的方法，用于分發(fā)（dispatch）一個Action對象以更新應(yīng)用程序的狀態(tài)。Dispatch方法接收一個Action對象作為輸入，并且調(diào)用Store中的Reducer函數(shù)來計算新的應(yīng)用程序狀態(tài)。Redux Store然后存儲新狀態(tài)，并通知已連接的React組件以進行重新渲染。

使用Dispatch，您可以將Action對象應(yīng)用于應(yīng)用程序的狀態(tài)（例如增加一個項目到待辦事項列表）。當(dāng)您調(diào)用Dispatch方法時，Redux Store會計算新狀態(tài)，然后通知您的React組件。您的組件可以根據(jù)新狀態(tài)重新渲染，顯示新項目的列表。

在Redux中，Dispatch的基本語法如下：

store.dispatch(action)

在這個例子中，`store`是一個Redux Store對象，`action`是一個帶有type屬性的包含應(yīng)用程序發(fā)生操作的Action對象。當(dāng)調(diào)用該Dispatch方法時，Store對象將Action對象發(fā)送到Store中，Reducer函數(shù)計算出應(yīng)該如何更新狀態(tài)，并通知所有連接的React組件進行重新渲染。

Dispatch是Redux中非常重要的一個方法，它使得應(yīng)用程序狀態(tài)的改變更加可預(yù)測，可控。同時，Dispatch方法也使?fàn)顟B(tài)管理變得更加清晰，因為所有狀態(tài)的變更都通過Action對象傳遞并在Reducer函數(shù)中處理。

2.5 Middleware：一個函數(shù)，可以擴展 Redux 的功能，例如在 action 到達 reducer 之前記錄 action、處理異步 action、實現(xiàn)路由機制等。

在Redux中，Middleware是一個位于Dispatch和Reducer之間的函數(shù)，在Action到達Reducer之前攔截它們。Middleware提供一種機制，可以讓您在執(zhí)行Action和更新應(yīng)用程序狀態(tài)之間進行額外的處理。例如，中間件可以用于監(jiān)視Action對象或在網(wǎng)絡(luò)請求期間顯示進度條等。

Redux中的Middleware必須是一個函數(shù)，它接收三個參數(shù)：`store`、`next`和`action`。`store`對象提供對Redux Store的訪問，`next`是一個函數(shù)，它允許Action繼續(xù)傳遞到下一個Middleware或最終到達Reducer。此外，Middleware還需要返回處理Action的函數(shù)。

在Redux中使用Middleware需要使用`applyMiddleware`方法增強Redux Store，它接收一個或多個Middleware函數(shù)作為輸入。例如：

import { createStore, applyMiddleware } from 'redux';
import { myMiddleware } from './myMiddleware';
import rootReducer from './rootReducer';
const store = createStore(rootReducer, applyMiddleware(myMiddleware));

在這個例子中，我們使用`createStore`函數(shù)來創(chuàng)建Redux Store，并使用`applyMiddleware`方法增強它，以便它可以使用我們定義的`myMiddleware`中間件。中間件將在Action到達Reducer之前執(zhí)行，可以進行各種操作，例如異步網(wǎng)絡(luò)請求、發(fā)送日志、修改Action等。

Redux中的Middleware可以使應(yīng)用程序更加靈活和可維護。它為開發(fā)人員提供了一種機制，可以在執(zhí)行Action和更新狀態(tài)之間執(zhí)行自定義操作，以及攔截和修改Action對象。

3. 如何使用 Redux

3.1 安裝 Redux 并初始化 Store

在進行Redux開發(fā)之前，您需要首先安裝Redux庫。您可以使用npm命令來進行安裝:

npm install redux

安裝完成之后，您可以開始使用Redux。

下面是一個基本的Redux Store初始化示例：

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);

在這個例子中，我們首先導(dǎo)入Redux庫的`createStore`函數(shù)，然后導(dǎo)入我們的根Reducer函數(shù)`rootReducer`。接著，我們使用`createStore`函數(shù)來創(chuàng)建Redux Store對象，并將`rootReducer`作為參數(shù)傳遞。

現(xiàn)在，我們已經(jīng)創(chuàng)建了一個基本的Redux Store對象，但是它還沒有與我們的React應(yīng)用程序連接起來。為了將Redux Store與React應(yīng)用程序連接起來，您需要使用Redux提供的一個稱為`Provider`的React組件，它允許您將Redux Store作為prop傳遞給React組件樹中的所有組件。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在這個例子中，我們使用`Provider`組件將Redux Store傳遞給React應(yīng)用程序，并將`App`組件作為其子元素?，F(xiàn)在，我們的Redux Store可以在整個應(yīng)用程序中使用，并與React組件進行交互了。

3.2  創(chuàng)建 action 和 reducer

在Redux中，Action和Reducer是兩個非常重要的概念，它們一起協(xié)作來管理您的應(yīng)用程序狀態(tài)。

在Redux中，Action必須是一個帶有`type`屬性的純對象，該屬性指定Action的類型。例如：

const ADD_TODO = 'ADD_TODO';
const addTodo = (text) => {
  return {
    type: ADD_TODO,
    text
  }
};

在這個例子中，`addTodo`函數(shù)是一個Action Creator，它接收帶有todo文本的參數(shù)，并生成一個帶有`type`屬性的Action對象和一個`payload`屬性。每個Action都應(yīng)該有一個唯一的類型，在這種情況下是`ADD_TODO`。根據(jù)Redux約定，`payload`屬性可選，用于傳遞有關(guān)Action的附加信息。

在Redux中，Reducer是一個純函數(shù)，其接收應(yīng)用程序的當(dāng)前狀態(tài)和傳遞的Action對象作為參數(shù)，并返回應(yīng)用程序的新狀態(tài)。Reducer通常分多個小函數(shù)，每個函數(shù)處理應(yīng)用程序狀態(tài)中的一部分。例如：

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

在這個例子中，`todoReducer`是一個處理Todo列表的Reducer函數(shù)。它接收當(dāng)前狀態(tài)和傳遞的Action對象，并根據(jù)Action類型更新狀態(tài)。在`ADD_TODO`類型的Action中，它在現(xiàn)有Todo列表中添加一個新的Todo，并返回更新后的新狀態(tài)。如果Action類型不是`ADD_TODO`，則返回當(dāng)前狀態(tài)。

Reducer是一個純函數(shù)，它不得修改任何傳遞給它的參數(shù)，也不得有任何副作用。Reducer必須始終返回一個新的狀態(tài)對象，不得直接修改原始狀態(tài)。

在Redux應(yīng)用程序中，不斷變化的狀態(tài)被保存在一個稱為Store的單一對象中。該Store由Redux庫提供，并包括用于更新狀態(tài)的`dispatch`方法。使用Action和Reducer，Redux提供了一種可預(yù)測的狀態(tài)管理機制，使得管理和跟蹤應(yīng)用程序狀態(tài)變得更加容易。

3.3 在組件中使用 mapStateToProps 和 mapDispatchToProps 函數(shù)將 Store 中的狀態(tài)和 dispatch 函數(shù)映射到組件的 props 上

在Redux中，`mapStateToProps`和`mapDispatchToProps`函數(shù)用于將Redux Store中的狀態(tài)和dispatch函數(shù)映射到React組件的props上。通過將這些數(shù)據(jù)和函數(shù)作為props傳遞給組件，您可以輕松地在組件中對應(yīng)用程序狀態(tài)進行操作，這也是Redux和React協(xié)作的關(guān)鍵之一。

`mapStateToProps`函數(shù)用于將Redux Store中的部分狀態(tài)映射到組件的props上。該函數(shù)接收整個Redux Store作為參數(shù)，并返回一個對象，對象中的每個鍵值對都將成為組件的props。例如：

const mapStateToProps = (state) => {
  return { todos: state.todos }
};

在這個例子中，`mapStateToProps`函數(shù)將Redux Store中名為`todos`的狀態(tài)映射到組件的props上?，F(xiàn)在，組件可以通過`this.props.todos`來訪問Redux Store中的`todos`狀態(tài)。

`mapDispatchToProps`函數(shù)用于將dispatch函數(shù)映射到組件的props上。該函數(shù)接收`dispatch`作為參數(shù)，并返回一個包含dispatch操作的對象。例如：

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => dispatch(addTodo(text)),
    completeTodo: (id) => dispatch(completeTodo(id))
  }
};

在這個例子中，`mapDispatchToProps`函數(shù)將`addTodo`和`completeTodo`函數(shù)映射到組件的props上，并使用`dispatch`函數(shù)分派`ADD_TODO`和`COMPLETE_TODO`操作?，F(xiàn)在，組件可以通過`this.props.addTodo`和`this.props.completeTodo`方法來調(diào)用dispatch操作，以更新Redux Store中的應(yīng)用程序狀態(tài)。

一旦您定義了`mapStateToProps`和`mapDispatchToProps`函數(shù)，您可以使用`connect`方法將它們連接到React組件中，并將Redux Store作為參數(shù)傳遞。例如：

import { connect } from 'react-redux';
import { addTodo, completeTodo } from './actions';
import MyComponent from './MyComponent';
const mapStateToProps = (state) => {
  return { todos: state.todos }
};
const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => dispatch(addTodo(text)),
    completeTodo: (id) => dispatch(completeTodo(id))
  }
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在這個例子中，我們使用`connect`方法將`mapStateToProps`和`mapDispatchToProps`函數(shù)與`MyComponent`組件連接，并將`connect`方法的結(jié)果導(dǎo)出。現(xiàn)在，`MyComponent`組件可以通過`this.props.todos`, `this.props.addTodo`和`this.props.completeTodo`訪問Redux Store中的數(shù)據(jù)和方法。

3.4 向 Store 分發(fā) action

在Redux中，要分發(fā)（Dispatch）一個Action，需要使用`dispatch`方法，并向它傳遞需要分發(fā)的Action對象。例如：

import { useDispatch } from 'react-redux';
import { addTodo } from './actions';
const AddTodoForm = () => {
  const dispatch = useDispatch();
  const handleSubmit = (event) => {
    event.preventDefault();
    const text = event.target.elements.todo.value;
    dispatch(addTodo(text));
    event.target.reset();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
};

在這個例子中，我們使用`useDispatch`鉤子來獲取`dispatch`函數(shù)。在處理表單提交事件時，我們使用`dispatch`函數(shù)將新的`addTodo` Action分發(fā)到Redux Store中。通過這種方式，Redux Store中的狀態(tài)將更新，同時也將觸發(fā)組件的重新渲染，以反映新的應(yīng)用程序狀態(tài)。

注意，您需要將`addTodo` Action Creator作為參數(shù)傳遞給`dispatch`方法，而不是直接將Action對象傳遞給它。在Redux應(yīng)用程序中，Action Creator負責(zé)創(chuàng)建符合Redux規(guī)范的Action對象，并將其傳遞給dispatch函數(shù)以進行分發(fā)。

通過分發(fā)Action對象，Redux應(yīng)用程序?qū)憫?yīng)它，調(diào)用相應(yīng)的Reducer函數(shù)，更新Store中的狀態(tài)，導(dǎo)致組件被重新渲染。每個Action Creator都應(yīng)該返回一個Action對象，表示需要執(zhí)行的操作。在Redux中，一個Action表示了一項任務(wù)，但并不負責(zé)執(zhí)行它，而是由Reducer函數(shù)去處理。

4. 使用 React-Redux 簡化 Redux

`React-Redux`是一個Redux與React協(xié)同工作的庫，它提供了一些簡化Redux使用的組件和方法。使用React-Redux，您可以更輕松地將Redux的狀態(tài)和操作映射到您的React組件上。

`Provider` 組件是React-Redux的核心組件，它允許您將Redux Store作為prop傳遞給React應(yīng)用程序中的所有組件，使得Redux Store可以在整個組件樹中使用。例如：

import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在這個例子中，我們使用`Provider`組件將Redux Store作為prop傳遞給整個React應(yīng)用程序，并將`App`組件作為`Provider`的子組件。現(xiàn)在，`App`組件以及它的子孫組件可以輕松地從Redux Store中讀取和更新應(yīng)用程序狀態(tài)。

`connect()`方法是React-Redux的主要方法，它允許您將Redux的狀態(tài)和操作與React組件連接起來。使用`connect()`方法，您可以輕松地將Redux Store中的狀態(tài)和操作映射到組件的props上。

import { connect } from 'react-redux';
import { addTodo } from './actions';
import MyComponent from './MyComponent';
const mapStateToProps = (state) => {
  return { todos: state.todos }
};
const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (text) => dispatch(addTodo(text)),
  }
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

在這個例子中，我們使用`connect()`方法將`mapStateToProps`和`mapDispatchToProps`函數(shù)與`MyComponent`組件連接起來，并將連接結(jié)果導(dǎo)出?，F(xiàn)在，`MyComponent`組件可以通過`this.props.todos`和`this.props.addTodo`來訪問Redux Store中的狀態(tài)和操作。

React-Redux還提供了兩個鉤子，`useSelector`和`useDispatch`，它們允許您輕松地在React組件中使用Redux的狀態(tài)和操作。

import { useSelector, useDispatch } from 'react-redux';
import { addTodo } from './actions';
const AddTodoForm = () => {
  const dispatch = useDispatch();
  const todos = useSelector(state => state.todos);
  const handleSubmit = (event) => {
    event.preventDefault();
    const text = event.target.elements.todo.value;
    dispatch(addTodo(text));
    event.target.reset();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
};

在這個例子中，我們使用`useDispatch`鉤子獲取`dispatch`函數(shù)，并使用它來分發(fā)`addTodo` Action。同時，我們使用`useSelector`鉤子獲取Redux Store中的`todos`狀態(tài)，并將其傳遞給組件作為一個變量。

React-Redux提供了許多其他的組件和方法來幫助您更輕松地使用Redux，并提供了簡化Redux操作的體驗。例如，React-Redux提供了一個`useStore`鉤子，它允許您獲取Redux Store對象，以便進行更高級的操作。

5. 使用 Redux 中間件

Redux中間件是一種用于攔截Redux Action并在Action到達Reducer之前執(zhí)行任務(wù)的機制。使用Redux中間件，您可以在處理Action之前或之后執(zhí)行額外的任務(wù)，例如調(diào)用API或記錄日志。

5.1 安裝和使用中間件

要使用Redux中間件，您需要使用Redux的`applyMiddleware`函數(shù)將中間件連接到Store上。例如：

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import loggerMiddleware from 'redux-logger';
import rootReducer from './reducers';
const middlewares = [thunkMiddleware, loggerMiddleware];
const store = createStore(rootReducer, applyMiddleware(...middlewares));

在這個例子中，我們使用`applyMiddleware`函數(shù)將`thunkMiddleware`和`loggerMiddleware`中間件連接到Redux Store上?，F(xiàn)在，當(dāng)我們分發(fā)Action時，這些中間件將被調(diào)用，并按照指定順序執(zhí)行。

5.2 使用Thunk中間件處理異步操作

`thunkMiddleware`是一種流行的Redux中間件，它允許您使用Redux Action Creator返回函數(shù)，而不是返回常規(guī)的Action對象。這些函數(shù)通常用于異步操作，例如API請求或延遲的UI更新。

例如，一個使用`thunkMiddleware`處理異步請求的Action Creator如下所示：

const fetchTodos = () => {
  return (dispatch) => {
    dispatch({ type: FETCH_TODOS_REQUESTED });
    return fetch('/api/todos')
      .then(response => response.json())
      .then(todos => dispatch({ type: FETCH_TODOS_SUCCESS, payload: todos }))
      .catch(error => dispatch({ type: FETCH_TODOS_ERROR, error: error.message }));
  };
};

在這個例子中，`fetchTodos`函數(shù)返回一個函數(shù)，而不是返回常規(guī)的Action對象，該函數(shù)將`dispatch`函數(shù)作為參數(shù)，并在異步請求完成后將Action對象分派到Redux Store中。當(dāng)我們分派這個Action時，`thunkMiddleware`會攔截該Action，并執(zhí)行這個函數(shù)，而不是直接將其發(fā)送到Reducer。當(dāng)異步請求完成時，`dispatch`函數(shù)將會被調(diào)用，以將異步請求的結(jié)果發(fā)送到Redux Store中。

5.3 使用Logger中間件記錄應(yīng)用程序狀態(tài)

`loggerMiddleware`是另一個常見的Redux中間件，它允許您記錄Redux Store的每個Action以及處理這些Action所用的時間。例如：

const loggerMiddleware = store => next => action => {
  console.log(`Action: ${action.type}, State:`, store.getState());
  const result = next(action);
  console.log(`New State:`, store.getState());
  return result;
};

在這個例子中，我們定義了一個名為`loggerMiddleware`的中間件函數(shù)，它接收Redux Store作為參數(shù)，并返回一個函數(shù)，該函數(shù)接收`next`函數(shù)和Action對象作為參數(shù)。在這個函數(shù)中，我們使用`console.log`記錄了Action的類型和當(dāng)前Redux Store的狀態(tài)。然后，我們調(diào)用`next`函數(shù)以執(zhí)行下一個中間件或?qū)ction發(fā)送到Reducer。在Action處理完成后，我們再次記錄狀態(tài)，并返回結(jié)果。

這個簡單的`loggerMiddleware`函數(shù)可以幫助您更輕松地調(diào)試Redux應(yīng)用程序，以便查看Redux Store中的狀態(tài)和每個Action的執(zhí)行時間。

在整個應(yīng)用程序中，您可以使用多個中間件將多個任務(wù)連接到Redux Store和Action處理中。這些中間件可以通過函數(shù)組合一起使用，以便以可預(yù)測的方式對每個Action進行處理。

到此這篇關(guān)于React中redux的使用的文章就介紹到這了,更多相關(guān)React redux使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論