Redux基础
const Redux = require('redux');
const reducer = function(state, action) {
if (action.type === 'changeName') {
// const newState = JSON.parse(JSON.stringify(state));
// 不能直接修改原来的state对象
return Object.assign({}, state, {name: action.name});
} else {
// 未配置情况，返回原来的state
return state;
}
}
// 参数: reducer(return state), [init state]
const store = Redux.createStore(reducer, {name: 'init name', age: 20});
// 订阅监听
store.subscribe(() => console.log(store.getState()));
// 同步dispatch
const action = {
changeName() {
return {
type: 'changeName',
name: 'lily'
}
},
increment (number) {
return {
type: "increment",
data: number
}
}
}
store.dispatch(action);
redux中, Redux API主要有：
1. createStore()
2. applyMiddleware()
3. combineReducers()
// combineReducers 实现原理 // 将各个reducer函数包裹在一个对象中，最后通过生成一个新reducer函数 // function combineReducers(reducers) { // return function reducer(state, action) { // let newState = {}; // for (let key in reducers) { // 把state中每一个属性值作为state，带入对应的Reducer中进行处理 // newState[key] = reducers[key](state[key],action); // } // } // }
const Redux = require('redux');
// const state = { a: [], b: [], c:{ name: '', group: []} };
const aReducer = function(state, action) {
if (typeof state === 'undefined') return [];
switch (action.type) {
case 'a':
return state.concat([action.data]);
default:
return state;
}
}
const bReducer = function(state, action) {
if (typeof state === 'undefined') return [];
switch (action.type) {
case 'b':
return state.concat([action.data]);
default:
return state;
}
}
const cNameReducer = function(state, action) {
if (typeof state == 'undefined') return '';
switch (action.type) {
case 'c':
return action.name;
default:
return state;
}
}
const cGroupReducer = function(state, action) {
// state对应的是group的value
if (typeof state === 'undefined') return [];
switch(action.type) {
case 'c':
return state.concat(action.item);
default:
return state;
}
}
const cReducer = function (state, action) {
// state对应的是c的value
if (typeof state === 'undefined') return {name: '', group: []};
switch(action.type) {
case 'c':
// 返回reducer处理函数，然后调用
return Redux.combineReducers({name: cNameReducer, group: cGroupReducer})(state, action);
default:
return state;
}
}
// 每个属性对应的reducer
const reducers = Redux.combineReducers({a: aReducer, b: bReducer, c: cReducer});
const store = Redux.createStore(reducers, {a: [111], b: [222], c:{ name: 'hi', group:[] }});
store.subscribe(() => console.log(store.getState()));
const action1 = {
type: 'b',
data: 'lead'
};
const action2 = {
type: 'a',
data: 'tail'
}
const action3 = {
type: 'c',
name: 'jkp',
item: 'pp'
}
store.dispatch(action1);
store.dispatch(action2);
store.dispatch(action3);
store API包括以下几个：
1. getState()
2. subscribe(callback)
3. dispatch(action)
Redux默认只支持同步action[返回对象]（即：dispatch本身只能进行同步触发），若要实现异步action，需要借助一些特殊的插件，如redux-thunk，redux-promise。
let action = { // 同步action,返回一个对象 increment (number) { return { type: "increment", data: number } }, // 异步action, 返回一个函数 asyncIncrement (number) { return dispatch => { // 函数内部执行异步操作 setTimeout(() => { // dispatch一个同部的action对象 dispatch({ type: "increment", data: number }) }, 1000); } }, }
与此同时，在createStore()加入第二个参数--中间件 Redux.applyMiddleware(xxx)
const thunk = require("redux-thunk").default;
const store = Redux.createStore(reducer, Redux.applyMiddleware(thunk));
这里提一下‘redux-thunk'这个中间件的使用[转自：https://juejin.im/post/6844903505199628301]
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
//注册thunk到applyMiddleware
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore);
const store = createStoreWithMiddleware(rootReducer);
//action方法
function increment() {
return {
type: INCREMENT_COUNTER
};
}
//执行一个异步的dispatch
function incrementAsync() {
return dispatch => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
源码分析
// thunk-redux 源码 function createThunkMiddleware(extraArgument) { // 将dispatch和getState传入action，next()和action()是redux提供的方法。 return ({ dispatch, getState }) => next => action => { // 接着做判断，如果action是一个function，就返回action(dispatch, getState, extraArgument)，否则返回next(action) if (typeof action === 'function') { return action(dispatch, getState, extraArgument); } return next(action); }; }
const thunk = createThunkMiddleware(); // 给thunk设置一个属性withExtraArgument，并且将createThunkMiddleware整个函数赋给它。 thunk.withExtraArgument = createThunkMiddleware; export default thunk;
总结：thunk是一个中间函数，它的返回值是一个函数表达式。action里面可能传递多个参数，我们不可能再专门替每个action写一个传递方法。那么就有了thunk的出现，thunk可以将多个参数的函数作为一个参数传递。
例如有这样一个action
function test(arg1, arg2, ...) { return { type: "TEST", arg1, arg2, ... } }
然后我们在执行dispatch()方法是，需要把test()的返回值作为参数传递。这样就解决了多参数传递的问题，这个test()就成了一个thunk。
promise实现异步触发
// 借助promise实现异步触发 function callAction() { const actionPromise = new Promise((resovle, reject) => { const action = { type: 'changeName', name: 'lily' }; resovle(action); }) actionPromise.then((action) => { store.dispatch(action); }) } callAction();
PS: redux-devtools下载安装 https://github.com/zalmoxisus/redux-devtools-extension/releases
然后在项目目录下npm i redux-devtools-extension --save-dev
import {composeWithDevTools} from 'redux-devtools-extension';
const store = Redux.createStore(reducer, composeWithDevTools(Redux.applyMiddleware(thunk)));
