Redux + React-Redux + Redux-Thunk 在 React 實際項目開發中使用詳解

React 是咱們的視圖框架，但在大型項目開發的時候須要公用的數據狀態是很難管理的，有明顯父子關係的組件還比較方便傳遞值，但不要緊的組件傳值是很是麻煩的，這時候就須要用到咱們的狀態管理庫 Redux，該文章會講解在實際React項目開發中redux + react-redux + redux-thunk 組合應用，這也是咱們如今企業項目開發中最經常使用的搭配，讓你可以快速應用起來！

1、Redux 介紹

Redux 是搭配 React 項目開發中最經常使用的狀態管理庫，你們知道在咱們 React項目開發時，組件的公用數據狀態(如用戶信息等)，可能多組件都會用到，若是組件間的關係比較明確(如父子關係)，傳遞還比較方便，但若是關係不明確或者毫無關係，這時候就很是麻煩了，但藉助咱們的Redux能夠把這些狀態存到Redux的store中，哪一個組件須要就去store裏面取，哪一個組件想要改變store，就去調取相應的action，action會觸發reducer改變store，這樣每一個組件的store都會改變。

2、Redux 安裝

npm i redux react-redux redux-thunk
複製代碼

這裏咱們一次安裝了三個庫：

redux：核心庫，完成store數據狀態管理，reducer(觸發會返回新的store替換老的store)管理，action(reducer咱們不能直接觸發，須要調用action來觸發reducer)管理。

react-redux：用來簡化在React中使用Redux的流程，其中Provider提供器，全局提供store狀態，connect鏈接器，須要store狀態的用他來鏈接。

redux-thunk：使redux的action可以寫異步方法，自己action中是不能寫異步方法的，用了redux-thunk才能夠。

3、建立store相應文件(store、reducer、action、action-type)

在項目src目錄中建立相應目錄和文件

store/index.js：建立 store，並把 reducer傳入做爲第一個參數，應用中間件 redux-thunk做爲第二個參數，具體代碼以下

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
import thunk from "redux-thunk";

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

export default store;
複製代碼

store/reducer.js：建立了一個count的reducer，每次觸發action的時候會把傳過來的值做爲第二個參數，第一個參數爲老的state，reducer執行完畢返回新的state會替換老的state，其中咱們還引入redux的combineReducers是用來合併多個reducer最終返回一個集成的reducer

import { combineReducers } from "redux";
import { COUNT_ADD, COUNT_REDUCE } from "./action-type";

const initCount = {
  count: 0,
};

function count(state = initCount, action) {
  switch (action.type) {
    case COUNT_ADD:
      return state.count + 1;
    case COUNT_REDUCE:
      return state.count - 1;
    default:
      return state;
  }
}

export default combineReducers({
  count,
});
複製代碼

store/action.js：每次咱們想要改變store，都須要先觸發action，另外咱們用了redux-thunk後。能夠在action中執行異步方法(如ajax數據請求等)，action去觸發reducer發生store的改變。在此示例中，個人action比較簡單，實際中你們的可能比較複雜，可是原理相同，一個action方法，執行相應邏輯(如ajax請求，或邏輯判斷等)，最後返回一個action對象，reducer會根據action對象的type和data來執行相應的store更改

import { COUNT_ADD, COUNT_REDUCE } from "./action-type";

export const receiveCountAdd = () => ({ type: COUNT_ADD });

export const receiveCountReduce = () => ({ type: COUNT_REDUCE });
複製代碼

store/action-type.js：這裏面是咱們相應action對象的type，爲何我要作這麼一個步驟，由於咱們須要在action.js傳遞action對象的時候加上他，也要在reducer.js判斷相應的type，避免由於type比較長比較複雜，兩邊不一致，程序也不會報錯(由於reducer判斷沒有相應type就會走default)，因此咱們設置一個常量做爲type

// count自增
export const COUNT_ADD = 'COUNT_ADD'

// count自減
export const COUNT_REDUCE = 'COUNT_REDUCE'
複製代碼

到此咱們相應的store就總體建立完畢，接下來就是在相應組件中使用它了。

4、組件中接收store及觸發action改變store

在此以前咱們要在全局用react-redux的Provider全局提供store狀態，這裏咱們直接在index.js中使用它，並把store傳遞給他的屬性store

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

ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);
複製代碼

接下來咱們就能夠在組件中使用connect鏈接器獲取咱們須要的store以及相應的action了，首先引入connect和咱們建立的相應action：receiveCountAdd，在暴露組件的使用connect，它是一個高階函數(執行函數返回一個函數)，執行第一個函數時有兩個參數(第一個爲須要接收的state，這裏咱們是count，第二個爲action，這裏用的es6寫法)，第二個函數再傳入咱們的組件名，作此步驟後，咱們須要的store和action就會掛載到咱們的props上，而後咱們獲取或者執行就很是簡單了(見useEffect中)

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { receiveCountAdd } from "../../store/action";

function Article(props) {
  useEffect(() => {
    props.receiveCountAdd();
    console.log(props.count);
  }, []);
  return <div>文章信息</div>;
}

export default connect(
  (state) => ({ count: state.count }),
  { receiveCountAdd },
)(Article);
複製代碼

至此，Redux + React-Redux + Redux-Thunk 在 React 實際項目開發中使用詳解就講解完畢了，若是有不太明白的小夥伴，能夠留言哦！