redux
redux
Shi Jian Xin
想,都是问题。做,才是答案。
展开
-
redux——redux-actions
一、为什么要使用redux-actionsredux-actions是用来简化redux中action的创建和reducer的创建二、安装npm install redux-actions --save// 或yarn add redux-actions三、使用createAction:用于简化创建一个action创建函数,createAction接收三个参数,第一个参数为action的type值,第二个参数为一个函数,函数的返回值为payload的值,第三个参数为附带的信息之前acti原创 2020-11-02 21:15:35 · 642 阅读 · 0 评论 -
redux——redux-saga常用指令
一、安装二、使用三、为什么要使用reudx-saga?在解决redux副作用的中间件中,redux-thunk、redux-promise虽然也能解决问题,但是它们会导致action和action创建函数不再纯净,因为他们改动了action,而redux-saga就是为了解决这个问题,他保持了action和action创建函数的纯净...原创 2020-10-30 01:14:59 · 540 阅读 · 0 评论 -
redux副作用处理——redux-promise
一、安装npm install --save redux-promise// 或yarn add redux-promise二、使用import { createStore, applyMiddleware } from "redux";import * as loginActions from "./action/login";import reducer from "./reducer";import logger from "redux-logger";import promise原创 2020-10-26 18:00:51 · 699 阅读 · 0 评论 -
redux副作用处理——redux-thunk
一、安装yarn add redux-thunk// 或npm install --save redux-thunk二、使用import { createStore, applyMiddleware } from "redux";import * as loginActions from "./action/login";import reducer from "./reducer";import logger from "redux-logger";import thunk from原创 2020-10-25 17:32:46 · 654 阅读 · 0 评论 -
redux日志记录——redux-logger
一、安装npm i --save redux-logger// 或yarn add redux-logger二、使用import { createStore, applyMiddleware } from "redux";import reducer from "./reducer";import logger from "redux-logger";import * as loginActions from "./action/login";// 创建仓库const store =原创 2020-10-25 16:02:47 · 3326 阅读 · 0 评论 -
Redux中间件和applyMiddleware
一、Redux中间件是什么:中间件是在不影响原本功能,且不改变原本代码的基础上,对仓库store中的dispatch方法进行功能加强二、Redux中间件原理:原理:更改仓库中的dispatch函数例如:在分发action的时候打印出仓库原状态和仓库新状态// 创建仓库const store = createStore(reducer);// 保存原始的dispatch函数const oldDispatch = store.dispatch;// 修改dispatch函数store.d原创 2020-10-23 22:16:30 · 218 阅读 · 0 评论 -
redux——combineReducers原理
import ActionTypes from './utils/actionTypes'import warning from './utils/warning'import isPlainObject from './utils/isPlainObject'function getUndefinedStateErrorMessage(key, action) { const actionType = action && action.type const actionDe原创 2020-10-21 10:08:53 · 182 阅读 · 0 评论 -
redux——boundActionCreators原理
一、boundActionCreatorsboundActionCreators接收两个参数:1.actionCreators:可以是一个包含action创建函数的对象或者一个action函数,如果是一个action创建函数直接返回一个dispatch分发函数2.dispatch:仓库的dispatch函数二、源码:// 通过这个函数返回一个dispatch分发函数function bindActionCreator(actionCreator, dispatch) { return fun原创 2020-10-20 14:26:04 · 303 阅读 · 0 评论 -
redux——createStore原理
一.createStore的接收值和返回值1.createStore接收3个值:1.reducer2.preloadedState:仓库的初始状态3.enhancerexport default function createStore(reducer, preloadedState, enhancer) { let currentReducer = reducer // 仓库的reducer let currentState = preloadedState // 仓库当前的状态 let原创 2020-10-20 01:59:10 · 640 阅读 · 0 评论 -
react中使用redux
1.安装yarn add redux2.使用一、redux的reducerreducer就是一个普通函数,通过接收到的二个参数action和state计算得到新的状态state然后返回1.一个数据仓库有且只有一个reducer2.reducer必须是一个没有副作用的纯函数/** * * @param {*} state 之前仓库中的状态(数据) * @param {*} action 描述要做什么的对象 */function reducer(state, action) { s原创 2020-10-18 16:51:50 · 110 阅读 · 0 评论