redux基础知识

本篇文章主要介绍redux的基本使用方法，并简单封装，像vuex一样写redux

学习文档

英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux

redux是什么

redux和vuex几乎是一样的，都是一个状态管理库。只不过vuex是vue专用的。

redux是一个专门用于做状态管理的JS库(不是react插件库)。
它可以用在react, angular, vue等项目中, 但基本与react配合使用。

什么情况下需要使用redux

某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用。

redux的使用

依赖安装

npm i redux react-redux --save

react-redux帮我们在react项目中做了一些关于redux的封装，使我们可以更好的在react项目中使用redux。

引入

我们一般在store文件下的index.ts文件进行store编写(和vuex是一样的哦)

import {
    
     legacy_createStore } from 'redux'
// 一些初始数据
const defaultState = {
    
    
  customerId: null
}
// reducer 是一个函数，它接受先前的状态和当前的 action 作为参数，并返回新的状态。
let reducer = (state=defaultState) => {
    
    
  // 根据旧的state和action， 产生新的state的纯函数。
  return state
}
// 创建一个store
const store = legacy_createStore(reducer)
// 导出一个store
export default store

reducer 是一个函数，它接受先前的状态和当前的 action 作为参数，并返回新的状态。（其实可以简单的将reducer理解为vuex中action、mutation的融和，他就是来改变state状态值的）

注：为了便于学习，我们使用了legacy_createStore的早期写法，我们也可以使用createStore及configureStore。

目录优化

我们可以调整项目结构，使我们的代码层级更加清晰

src\store\index.ts

import {
    
     legacy_createStore } from 'redux''
import reducer from './reducer'
// 创建一个仓库
const store = legacy_createStore(reducer)
export default store

为了代码清晰，我们将reducer抽离单独封装。

src\store\reducer.ts

const defaultState = {
    
    
  customerId: null
}

let reducer = (state = defaultState) => {
    
    
  return state
}
export default reducer

使用useSelector读取state值

React Redux 库提供的 useSelector 钩子来简化获取 Redux 状态的过程。useSelector 允许你选择性地从 Redux 状态树中选择和返回所需的状态值。

import {
    
     useSelector } from 'react-redux';

function CounterDisplay() {
    
    
  // useSelector 接收一个回调函数，该回调函数可以访问 Redux 的状态树并返回所需的状态值。
  // state就是全局状态
  const customerId = useSelector(state =>state.customerId)
  return (
    <div>
    <p>{
    
    customerId}</p>
    </div>
  );
}

安装浏览器工具

我们可以给浏览器安装redux的调试工具Redux DevTools。它可以帮助我们更轻松地调试 Redux 应用程序

使用此工具，我们需要给项目安装相应的依赖

npm install --save-dev redux-devtools-extension

在创建 store 时，将 Redux DevTools 的中间件添加到 applyMiddleware 函数中：

// src\store\index.ts
import {
    
     legacy_createStore, applyMiddleware } from 'redux'
import {
    
     composeWithDevTools } from 'redux-devtools-extension'
import reducer from './reducer'

const store = legacy_createStore(reducer, composeWithDevTools(applyMiddleware()))

export default store

现在，我们就可以在控制台看到我们安装插件后的效果了

使用useDispatch修改state的状态值

Redux 中的状态是不可直接修改的，你需要通过触发一个 action，然后在 Reducer 中根据这个 action 的类型来修改状态。

import { useDispatch } from 'react-redux'

dispatch({ type: 'changeCustomerId', value: value })

src\store\reducer.ts

const defaultState = {
    
    
  customerId: null
}

let reducer = (state = defaultState, action: {
     
      type: string; value: any }) => {
    
    
  let newState = JSON.parse(JSON.stringify(state))
  switch (action.type) {
    
    
    case 'changeCustomerId':
      newState.customerId = action.value
      break
    default:
      break
  }
  return newState
}
export default reducer

上述代码中。我们根据action的type来判断是谁触发了函数，而做出响应的逻辑判断。

模块化封装

当我们有很多模块都使用dispatch触发了一个函数时，我们swicth里面需要写大量代码，代码难以维护。因此，我们对这里的代码进行模块化封装。

state与action抽离

首先，我们可以将state的写法和action的写法改造成类似vuex的写法。

假设我们有一个状态库，我们给这个状态库起名flexStore.ts，它的逻辑如下：

src\store\flexStore.ts

import {
    
     Store } from './reducer'

type State = {
    
    
  customerId: string
}
export default {
    
    
  state: {
    
    
    customerId: ''
  },
  action: {
    
    
    changeCustomerId(state, value) {
    
    
      state.customerId = value
    },
    demo1(state, value) {
    
    },
    demo2(state, value) {
    
    }
  }
} as Store<State>

然后，我们在reducer中使用，并遍历调用

import flexStore from "./felxStore.ts"

let reducer = (state =flexStore, action: {
     
      type: string; value: any }) => {
    
    
  let newState = JSON.parse(JSON.stringify(state))
    Object.keys(store.action).forEach((actionName: string) => {
    
    
      actionName === action.type && store.action[action.type](newState, action.value)
    })
  return newState
}
export default reducer

最后，入口文件引入reducer即可。

src\store\index.ts

import {
    
     legacy_createStore, applyMiddleware } from 'redux'
import {
    
     composeWithDevTools } from 'redux-devtools-extension'
import {
    
     reducer } from './reducer'

// Create a data warehouse
const store = legacy_createStore(reducer, composeWithDevTools(applyMiddleware()))

export default store

模块化管理

如果我们的项目不止一个flex状态库，还有其他状态库，如otherStore（这一点和vuex的modlue是一致的），那我们可以使用redux 的combineReducers实现多个状态库合并

src\store\otherStore.ts

import {
    
     Store } from './reducer'

type State = {
    
    
  a: string
}
export default {
    
    
  state: {
    
    
    a: ''
  },
  action: {
    
    
    changeCustomerId(state, value) {
    
    
      state.a = value
    },
  }
} as Store<State>

我们在reducer中分别引入不同的状态库，然后借助combineReducers即可完成不同状态库的组合

src\store\reducer.ts

import {
    
     combineReducers } from 'redux'
import flex from './flexStore'
import other from './otherStore'

export type Option<T> = {
    
    
  [actionName: string]: (state: T, value?: any) => void
}
export type Store<T> = {
    
    
  state: T
  action: Option<T>
}
const getModuleReducer = <T>(store: Store<T>) => {
    
    
  // 组合每个子模块的reducer,每个reducer必须返回最新的state对象。combineReducers的参数是合并后的state对象{state1:"value",state2:"value"}
  return (state = store.state, action: {
     
      type: string; value: any }) => {
    
    
    let newState = JSON.parse(JSON.stringify(state))
    Object.keys(store.action).forEach((actionName: string) => {
    
    
      actionName === action.type && store.action[action.type](newState, action.value)
    })
    return newState
  }
}
export const reducer = combineReducers({
    
    
  flex: getModuleReducer(flex)，
  other: getModuleReducer(other)，
})

getModuleReducer组合每个子模块的reducer,每个reducer必须返回最新的state对象。combineReducers的参数是合并后的state对象{state1:“value”,state2:“value”}

现在，我们就可以像vuex一样使用redux了，舒服！

像Vuex一样使用redux

redux基础知识

redux的使用

依赖安装

引入

目录优化

使用useSelector读取state值

安装浏览器工具

使用useDispatch修改state的状态值

模块化封装

state与action抽离

模块化管理

猜你喜欢