Redux API使用教程

compose

它是一个没有依赖的纯函数

compose(f, g, h)(...arg) => f(g(h（...arg)))

使用实例:

function func1(num) {
    console.log('func1' + num)
    return num + 1
}

function func2(num) {
    console.log('func2' + num)
    return num + 2
}

function func3(num) {
    console.log('func3' + num)
    return num + 3
}

let re1 = func3(func2(func1(0)))
console.log('re1' + re1)  // 0 1 3 6

// 隔壁二狗子说，要优雅
let re2 = Redux.compose(func3, func2, func1)(0)
console.log('re2' + re2)  // 结果同上

createStore

创建store

使用实例:

const { createStore } = Redux

function reducer(state, action) {
    // ...reducer处理过程
}

const store = createStore(reducer)
store.getState()

combineReducers

将多个reducer的状态合并

使用实例:

function reducer(state = {counter:0, todos: []}, action) {
    switch(action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: state.todos.push(action.type)
            }
        case 'INCREMENT':
            return {
                ...state,
                counter: state.counter+1
            }    
        default:
            return state
    }
}

// 隔壁二狗子说，随着逻辑越来越多，代码也会变得臃肿，而我喜欢优雅

/*
 * 目录结构如下
 * reducers/
 *     |-- index.js
 *     |-- counterReducer.js
 *     |-- todosReducer.js
 */

import { combineReducers } from 'redux
import counterReducer from './counterReducer'
import todosReducer from './todosReducer'

const rootReducer = combineReducers({  // 合并后，就成了state.counter,state.todos
    counter: counterReducer,
    todos: todosReducer
})

/* reducers/counterReducer.js */
export default function counterReducer(counter = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return counter + 1
        default:
            return counter
    }
}

/* reducers/todosReducer */
export default function todosReducer(todos = [], action) {
    switch(action.type) {
        case 'ADD_TODO':
            return [
                ...todos,
                action.payload
            ]
         default:
             return todos
    }
}

bindActionCreators

dispatch(ActionCreator(xxx)) 自动dispatch

使用实例:

$('#btn').on('click', () => {
    let content = $('#todoInput').val()
    let action = addTodo(content)  // 执行Action Creator 获取 action {type: 'xxx'}
    store.dispatch(action)  // 手动显示dispatch 一个 action
})

// 调用addTodo这个Action Createtor后得到一个action， 之后又要手动dispatch这个action，隔壁二狗子说，太麻烦

let actionCreators = Redux.bindActionCreators(
    {addTodo: addTodo},
    store.dispatch
)

$('#btn').on('click', () => {
    let content = $('#todoInput').val()
    actionCreators.addTodo(content)  // 自动dispatch
})

applyMiddleware

中间件

applyMiddleware简明对比

const stateMiddleware = ({getState}) => next => action {
    console.log('state before dispatch', getState())
    let returnValue = next(action)
    console.log('state after dispatch', getState())
    return returnValue
}

===>

function stateMiddleware(middlewareAPI) {
    return function(dispatch) {
        return function(action) {
            console.log('state before dispatch', middlewareAPI.getState())
            let returnValue = dispatch(action)
            console.log('state after dispatch', middlewareAPI.getState())
            return returnValue
        }
    }
}

使用实例:

function inc() {
    return { type: 'INCREMENT'}
}
function dec() {
    return { type: 'DECREMENT'}
}

function reducer(state, action) {
    state = state || { counter: 0 }
    
    switch(action.type) {
        case 'INCREMENT':
            return {counter: state.counter + 1}
        case 'DECREMENT':
            return {counter: state.counter - 1}
        default:
            return state
    }
}

const printStateMiddleware = ({getState}) => next => action => {
    console.log('dispatch 前', getState())
    let returnValue = next(action)
    console.log('dispatch 后', getState())
    return returnValue
}

let store = Redux.createStore(
    reducer,
    Redux.applyMiddleware(printStateMiddleware)
)

store.dispatch(inc());
store.dispatch(inc());
store.dispatch(dec());

总结

Redux 有五个API，分别是:

• createStore
• combineReducers
• applyMiddleware
• bindActionCreators
• compose

createStore 生成的 store 有四个API，分别是：

• getState
• dispatch
• subscribe
• replaceReducer