![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
redux
文章平均质量分 51
神奇大叔
这个作者很懒,什么都没留下…
展开
-
Flux、Atomic、Proxy 不同心智模型状态管理库的比较和原理
Flux、Atomic、Proxy 不同心智模型状态管理库的比较和原理原创 2024-06-17 12:31:43 · 324 阅读 · 0 评论 -
redux 自定义中间件
1、在store.js中 import {createStore,applyMiddleware} from 'redux'; const logger=store=>next=>action=>{ console.log(action) 当前派发的action let res =next(action) 加载下一个中间件 console.log(store.getState()) 下一个时刻仓库的返回状态 } const store=createSto原创 2020-07-08 10:08:29 · 314 阅读 · 0 评论 -
redux redux-immutable统一管理数据格式
将combineReducers内的reducer也转换成immutable对象,统一数据格式1、安装 cnpm install immutable --save 2、引入 将原本的import {combineReducers} from 'redux' 修改为import {combineReducers} from 'redux-immutable'即可代码示例:import {combineReducers} from 'redux-immutable'import Heade原创 2020-06-30 10:05:31 · 299 阅读 · 0 评论 -
redux immutable管理store状态
解决reducer不能直接'修改'state的问题虽然immutable看起来直接修改,实际上是返回了一个新的immutable对象1、安装 cnpm install immutable --save 2、引入 import {fromJS} from 'immutable' 还有Map和List等类型,fromJS是为对象准备的 3、将对象状态改变成immutable对象 xx=fromJS({ 键值对 }) 4、修改immutable状态 xx.set('键名',原创 2020-06-30 09:40:39 · 293 阅读 · 0 评论 -
redux redux-saga实现异步方法
1、安装 cnpm install redux-saga --save 2、引入,在创建store的文件中引入 import {createStore,applyMiddleware} from 'redux'; import createSagaMiddleware from 'redux-saga'3、创建中间件 const sagaMiddleware = createSagaMiddleware()4、使用中间件 const store = createStore( re原创 2020-06-29 10:39:38 · 912 阅读 · 0 评论 -
redux 当使用react-redux报错Invalid prop `component`
Invalid prop `component` of type `object` supplied to `Route`, e... 解决方案: 将路由改写成 传入props是为了保证props的内容正确 <Route path='/register' component={(props) => <Register { ...props } />}></Route> ...原创 2020-06-11 14:35:32 · 460 阅读 · 0 评论 -
redux 管理多个仓库
1、reducers.js中引入 import {combineReducers} from 'redux' 2、集中暴露reducer export default combineReducers({ reducer1, reducer2,... }) 此时getState()获得的是包含reuders内的所有reducer 3、store.js中统一管理reducer import reducers from './reducers' const store原创 2020-06-08 11:12:41 · 384 阅读 · 0 评论 -
redux 调试工具配置
1、安装谷歌插件Redux DevTools2、安装扩展工具 cnpm install --save-dev redux-devtools-extension3、在store.js中引入 import {composeWithDevTools} from 'redux-devtools-extension' const store=createStore(counter,composeWithDevTools(applyMiddleware(thunk)))代码示例:import {原创 2020-06-07 21:13:36 · 304 阅读 · 0 评论 -
redux react-thunk实现异步方法
redux默认不支持异步,需要插件才能实现 cnpm install --save redux-thunk1、在store.js中,引入中间件,并使用 import {createStore,applyMiddleware} from 'redux'; import thunk from 'redux-thunk' const store=createStore(counter,applyMiddleware(thunk))2、在action-type中定义action常量名,并设置与异步原创 2020-06-07 20:59:08 · 441 阅读 · 0 评论 -
react-redux Redux-Toolkit和react-redux以及Hooks应用、react-redux的ts写法
1、配置 npm install @reduxjs/toolkit react-redux npm install @types/react-redux ts需要 2、配置reducer import { createSlice,PayloadAction } from '@reduxjs/toolkit' export const counterSlice = createSlice({ name: 'counter', initialState: { 初始state t原创 2021-07-27 16:15:27 · 848 阅读 · 0 评论 -
redux 使用react-redux插件
用来降低redux的耦合度和使得代码更简洁1、安装 cnpm install --save react-redux 2、index.js中改变监听订阅 import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <Provider store={store} > <App /> </Provider> , document.getElementById原创 2020-06-07 17:26:16 · 313 阅读 · 0 评论 -
redux 完整详解
cnpm install redux --savestatereducer方法getState()dispatch(action) 产生新状态subscribe(listener) 订阅监听重绘原创 2020-06-07 16:47:43 · 3564 阅读 · 0 评论 -
redux 流程图
原创 2020-06-07 14:34:51 · 582 阅读 · 0 评论