一、redux core和redux tookit

1、區(qū)別

redux core是最原生的redux概念，其優(yōu)點(diǎn)是可定制性好，缺點(diǎn)是什么都要自己寫(xiě)。主要思想是通過(guò)傳入createStore，將actions、reducers、middlewares等進(jìn)行自己配置。

redux toolkit其實(shí)是去包裹一個(gè)redux core的工具集，引入了一些簡(jiǎn)化的 API去配置redux store。同時(shí)Redux Toolkit 中的 createSlice 自動(dòng)生成了每個(gè) reducer case 對(duì)應(yīng)的 action creators，免去了手動(dòng)編寫(xiě) action creators 的繁瑣步驟。不僅如此，redux toolkit還默認(rèn)集成了redux-thunk中間件。避免了每次都要手動(dòng)配置。

2、基本配置和使用

1、redux core

基本api：

• createStore  ：創(chuàng)建一個(gè)redux store
• combineReducers  ：合并多個(gè)reducer
• applyMiddleware：傳入中間件
• compose ：合并多個(gè)store

當(dāng)你配置某個(gè)store在store.js文件中、reducer定義在reducers.js文件中、并且引入一些middleware時(shí)，配置方法大致為：

//store.js
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunkMiddleware from 'redux-thunk'; // Redux Thunk 中間件
import loggerMiddleware from 'redux-logger'; // Redux Logger 中間件
const middlewares = [thunkMiddleware, loggerMiddleware]; // 定義要使用的中間件數(shù)組
const store = createStore(
  rootReducer,
  applyMiddleware(...middlewares) // 將中間件數(shù)組展開(kāi)并應(yīng)用到 Redux Store
);
export default store;

//reducers.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
import userReducer from './userReducer';
// 合并多個(gè) reducer
const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer
});
export default rootReducer;

//counterReducer.js
export function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}
//dispatch傳入action對(duì)象
//store.dispatch({ type: 'counter/incremented' })
// {value: 1}
//store.dispatch({ type: 'counter/incremented' })
// {value: 2}
//store.dispatch({ type: 'counter/decremented' })

2、redux toolkit

在slice.js中創(chuàng)建reducers、在store.js中創(chuàng)建store并配置reducers和中間件

//store.js
import { configureStore } from '@reduxjs/toolkit'
import todosReducer from '../features/todos/todosSlice'
import filtersReducer from '../features/filters/filtersSlice'
export const store = configureStore({
  reducer: {
    todos: todosReducer,
    filters: filtersReducer
  }
})

在slice中，只需要直接定義reducers操作而無(wú)需再對(duì)action creators即{type :  actions.type}對(duì)象做出顯示創(chuàng)建或定義，其放入dispatch中會(huì)自動(dòng)創(chuàng)建、分發(fā)

//slice.js，導(dǎo)出actions和reducers
import { createSlice } from '@reduxjs/toolkit'
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      state.push({
        id: action.payload.id,
        text: action.payload.text,
        completed: false
      })
    },
    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    }
  }
})
export const { todoAdded, todoToggled } = todosSlice.actions
export default todosSlice.reducer

二、dispatch action修改store

• dispatch 是同步的操作。當(dāng)你調(diào)用 Redux Store 的
• dispatch 方法分發(fā)一個(gè) action 時(shí)，Redux 會(huì)立即執(zhí)行 reducer 并更新?tīng)顟B(tài)。這意味著
• dispatch 操作本身不會(huì)引起異步行為。

在組件中，我們可以用useDispatch hook來(lái)獲取到dispatch方法，從而對(duì)store進(jìn)行操作

三、reducer

Reducer 是同步的。

在 Redux 中，Reducer 是一個(gè)純函數(shù)，負(fù)責(zé)處理分發(fā)的 action 并更新?tīng)顟B(tài)。

它是一個(gè)純粹的函數(shù)，不應(yīng)該包含任何副作用，如異步操作、網(wǎng)絡(luò)請(qǐng)求等。

四、middleware中間件

1、常用中間件 redux-thunk

• redux-thunk

是一個(gè) Redux 中間件，它允許你在 action creators 中返回函數(shù)而不僅僅是普通的 action 對(duì)象。

這個(gè)函數(shù)可以用于處理異步操作，如發(fā)起網(wǎng)絡(luò)請(qǐng)求、定時(shí)器、以及其他需要延遲執(zhí)行的操作。

在 Redux 中，普通的 action 必須是一個(gè)普通的對(duì)象，包含一個(gè) type 屬性來(lái)描述操作的類型。

但有些情況下，我們需要在 action creators 中執(zhí)行異步操作，例如從服務(wù)器獲取數(shù)據(jù)，然后再將相應(yīng)的數(shù)據(jù)分發(fā)到 Redux Store 中。

這就是 redux-thunk 發(fā)揮作用的地方。

redux-thunk 的主要功能是攔截分發(fā)的 action，dispatch中可以接受對(duì)象也可以接受函數(shù)，并判斷 action 是一個(gè)普通的對(duì)象還是一個(gè)函數(shù)。

如果是一個(gè)函數(shù)， redux-thunk 會(huì)將 dispatch 和 getState 函數(shù)傳遞給這個(gè)函數(shù)，使得你可以在函數(shù)內(nèi)部執(zhí)行異步操作，并在操作完成后手動(dòng)分發(fā)其他 action。

*用法示例：

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware)
);
// 異步 action creator
function fetchData() {
  return (dispatch, getState) => {
    // 獲取當(dāng)前 Redux store 狀態(tài)
    const currentState = getState();
    // 執(zhí)行異步操作
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 在異步操作完成后使用 dispatch 函數(shù)將請(qǐng)求結(jié)果傳遞給 Redux store
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      });
  };
}
store.dispatch(fetchData()); // 分發(fā)異步 action

• redux-saga

創(chuàng)建一個(gè) Saga，它是一個(gè) Generator 函數(shù)，用于處理特定的異步操作。

Saga 監(jiān)聽(tīng) action 并執(zhí)行相應(yīng)的邏輯。

你可以在 Saga 中執(zhí)行異步操作，如網(wǎng)絡(luò)請(qǐng)求、定時(shí)器等。

// sagas.js
import { takeEvery, put, call } from 'redux-saga/effects';
import { FETCH_DATA, fetchDataSuccess, fetchDataFailure } from './actions';
function* fetchDataSaga(action) {
  try {
    const response = yield call(fetch, 'https://api.example.com/data');
    const data = yield call([response, 'json']);
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}
export function* rootSaga() {
  yield takeEvery(FETCH_DATA, fetchDataSaga);
}

創(chuàng)建saga middleware放入到store中

// store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import { rootSaga } from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);
export default store;

• redux-logger

const loggerMiddleware = createLogger();

每當(dāng)你調(diào)用 action creator 時(shí)， redux-logger 會(huì)在瀏覽器控制臺(tái)中輸出相應(yīng)的日志，顯示 action 的類型、舊狀態(tài)、新?tīng)顟B(tài)等信息。

總之， redux-logger 是一個(gè)方便的中間件，用于在開(kāi)發(fā)環(huán)境中輸出有關(guān) Redux 操作的日志，以幫助你更好地理解應(yīng)用程序的狀態(tài)變化。

2、自定義中間件

重要的入?yún)ⅲ簊tore、next、action

next 是一個(gè)函數(shù)，用于將 action 繼續(xù)傳遞給下一個(gè)中間件或最終到達(dá) reducer。

在中間件函數(shù)中，你可以執(zhí)行一些邏輯，然后調(diào)用 next(action) 來(lái)將 action 傳遞給下一個(gè)中間件或 reducer。

例子：

const myMiddleware = store => next => action => {
  // 在 action 被分發(fā)到 reducer 前執(zhí)行的邏輯
  console.log('Middleware triggered:', action);
  // 將 action 傳遞給下一個(gè)中間件或 reducer
  const result = next(action);
  // 在 action 被分發(fā)到 reducer 后執(zhí)行的邏輯
  console.log('Middleware completed:', action);
  return result;
};

五、一些其他常用方法：（subscribe、connect等等）

1、subscribe

在 Redux 中， subscribe 是一個(gè)用于訂閱狀態(tài)變化的方法。

它允許你注冊(cè)一個(gè)回調(diào)函數(shù)，當(dāng) Redux Store 中的狀態(tài)發(fā)生變化時(shí)，這個(gè)回調(diào)函數(shù)會(huì)被調(diào)用，從而你可以執(zhí)行一些操作來(lái)響應(yīng)狀態(tài)的變化。

具體來(lái)說(shuō)， subscribe 方法的作用是將一個(gè)函數(shù)添加到狀態(tài)變化的監(jiān)聽(tīng)器列表中，每當(dāng)狀態(tài)發(fā)生變化時(shí)，所有訂閱了這個(gè)監(jiān)聽(tīng)器的函數(shù)都會(huì)被調(diào)用。

這樣，你可以在狀態(tài)變化時(shí)更新用戶界面、執(zhí)行特定操作等。

store.subscribe(() => console.log(store.getState()))

在上面的例子中， store.subscribe() 方法用于注冊(cè)一個(gè)監(jiān)聽(tīng)器，每當(dāng)狀態(tài)發(fā)生變化時(shí)，回調(diào)函數(shù)會(huì)被調(diào)用并輸出當(dāng)前的狀態(tài)。通過(guò)調(diào)用 unsubscribe() 方法，可以取消訂閱狀態(tài)變化，以避免不再需要的監(jiān)聽(tīng)器持續(xù)執(zhí)行。

總而言之， subscribe 方法在 Redux 中用于監(jiān)聽(tīng)狀態(tài)的變化，以便你可以在狀態(tài)更新時(shí)執(zhí)行相應(yīng)的操作，如更新界面或觸發(fā)其他邏輯。

2、connect

connect 是 React Redux 庫(kù)提供的一個(gè)高階函數(shù)（Higher-Order Function），用于連接 React 組件與 Redux Store。它的作用是將 Redux 的狀態(tài)（state）和操作（actions）與 React 組件進(jìn)行關(guān)聯(lián)，使得組件能夠訪問(wèn) Redux 中的狀態(tài)并調(diào)用相應(yīng)的操作來(lái)更新?tīng)顟B(tài)。

使用 connect 方法，你可以將 Redux Store 中的狀態(tài)映射到組件的 props 上，以便在組件內(nèi)部可以直接訪問(wèn)這些狀態(tài)。同時(shí)，你也可以將 Redux 的 Action Creators 映射到組件的 props 上，使得組件可以觸發(fā)這些操作來(lái)分發(fā) action，從而更新 Redux Store 的狀態(tài)。

connect 方法的基本語(yǔ)法如下：

import { connect } from 'react-redux';
// Connect the component to Redux
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Component);

其中， mapStateToProps 和 mapDispatchToProps 是兩個(gè)函數(shù)，用于定義如何將 Redux 的狀態(tài)和操作映射到組件的 props 上。它們的作用分別如下：

• mapStateToProps(state, ownProps) ：這個(gè)函數(shù)用于將 Redux 的狀態(tài)映射到組件的 props 上。它接收當(dāng)前的 Redux 狀態(tài)作為參數(shù)，然后返回一個(gè)對(duì)象，這個(gè)對(duì)象中的鍵值對(duì)會(huì)成為組件的 props。這樣，組件就可以通過(guò) props 直接訪問(wèn) Redux 中的狀態(tài)。
• mapDispatchToProps(dispatch, ownProps)：這個(gè)函數(shù)用于將 Redux 的 Action Creators 映射到組件的 props 上。它接收 Redux 的 dispatch 方法作為參數(shù)，然后返回一個(gè)對(duì)象，這個(gè)對(duì)象中的鍵值對(duì)通常是調(diào)用 Action Creators 后返回的 action 對(duì)象。這樣，組件就可以通過(guò) props 調(diào)用這些操作來(lái)分發(fā) action。

通過(guò) connect 方法，你可以實(shí)現(xiàn)將 Redux 的狀態(tài)和操作傳遞給組件，使得組件能夠與 Redux Store 進(jìn)行交互。這大大簡(jiǎn)化了組件與狀態(tài)管理之間的關(guān)系，提高了代碼的可維護(hù)性和可擴(kuò)展性。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論