Redux深入学习再总结

前端

2023-10-03 15:46:58

Redux的基本概念

Redux遵循Flux设计范式，是一种单向数据流架构。这意味着一份给定的状态永远不会被修改，而是创建一个新的状态来反映之前的状态加上新的信息。

Redux的核心组件包括：

Store： 一个中心化的状态容器，持有应用程序的整个状态。
Action： 一种发生的事情的对象，它包含一个type属性和可选的payload。
Reducer： 一个纯函数，它接受当前状态和一个action，并返回一个新的状态。

在项目中使用Redux

1. 创建store

在项目中创建一个store文件夹，在store文件夹中创建一个index.js文件，用于创建store。

import { createStore } from 'redux';

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

const store = createStore(reducer, { count: 0 });

export default store;

2. 引入reducer

如果不引入reducer，创建的store将是空数据，必须让reducer给store传入数据。

import store from './store';

console.log(store.getState()); // { count: 0 }

store.dispatch({ type: 'INCREMENT' });

console.log(store.getState()); // { count: 1 }

3. 使用Redux Toolkit

Redux Toolkit是一个官方工具包，它简化了Redux的构建过程。使用Redux Toolkit，你可以轻松创建store、reducer和action。

import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

const incrementAction = createAction('INCREMENT');
const decrementAction = createAction('DECREMENT');

const reducer = createReducer({ count: 0 }, {
  [incrementAction.type]: (state) => { state.count += 1; },
  [decrementAction.type]: (state) => { state.count -= 1; },
});

const store = configureStore({ reducer });

console.log(store.getState()); // { count: 0 }

store.dispatch(incrementAction());

console.log(store.getState()); // { count: 1 }