redux学习总结

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33696822

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bc48416e51d453eb93db525

Redux为JavaScript应用程序的提供可预测状态的容器，这极大降低了维护及调试成本！

安装`redux`和调试工具`redux-devtools`

yarn add redux
yarn add redux-devtools --dev
复制代码

基础概念

reducer 根据预定义操作符/命令action执行响应的数据变换

(previousState, action) => newState
复制代码

state 当前状态，数据对象
store 提供subscribe订阅及dispatch触发action等方法
action 预定义操作符/命令

export interface Action<T = any> {
  type: T
}
复制代码

创建`store`

import { createStore } from 'redux'
let store = createStore(reducer)
复制代码

监听

store.subscribe(()=>store.getState())
复制代码

触发

store.dispatch(action)
复制代码

合并多个`reducer`成一个`reducer` `combineReducers`

import {combineReducers} from 'redux'
combineReducers({...})
复制代码

中间件`applyMiddleware`

中间件是一个柯里化函数store => next => action =>{}

import {applyMiddleware, createStore} from 'redux';
createStore(reducer,applyMiddleware(
    loggerMiddleware
))
复制代码

手工使用`bindActionCreators`

import {bindActionCreators} from 'redux'
const boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
// 调用某个action方法
boundActionCreators.someMethod()
复制代码

组合 `compose`, 从右向左依次执行

import {compose} from 'redux'
复制代码

实践,一下所提函数均代表`纯函数`

尽量分离工具函数 tool function
尽量分离操作函数，操作函数由一个或多个工具函数组成
合理分离reducer，分离可降低维护成本
合并reducer
state设计尽量扁平化，不要有太深的嵌套

redux-observable

利用rxjs的强劲功能进行异步处理

在react中使用 `react-redux`

链接store, 传入相应的state和dispatch到组件props

import { connect } from 'react-redux'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
复制代码

共享store

import { Provider } from 'react-redux'

<Provider store={store}>
    {...}
</Provider>
复制代码

`react-router-dom`

import { BrowserRouter as Router, Route } from 'react-router-dom'
const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </Provider>
)
复制代码