通惠河边最简单的bindActionCreators入门与实现

192 阅读1分钟

本项目为create-react-app 生成,学习本文需要安装redux

npx create-react-app redux-test
cd redux-test
npm i redux
npm start

01、我们先看react class组件如何使用原生redux

# counter组件
import React from 'react';
import createStore from 'redux';
//定义reducer
let initialState = {num: 0}

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'add':
            console.log(1)
            return {num: state.num + action.val}
        case 'minus':
            console.log(2)
            return {num: state.num - action.val}
        default:
            return state
    }
}

let store = createStore(reducer, initialState);
export default class Counter extends React.Component {
    state = {num: store.getState().num}

    componentDidMount() {
        this.unsubscribe = store.subscribe(() => {
            this.setState({num: store.getState().num})
        })
    }

    componentWillUnmount() {
        this.unsubscribe()
    }

    render() {
        let {num} = this.state
        return <div>
            <p>{num}</p>
            <button onClick={() => store.dispatch({type: 'add', val: 1})}>add</button>
            <button onClick={() => store.dispatch({type: 'minus', val: 1})}>minus</button>
        </div>
    }
}

02、可以看出来最让人恶心的是下面这个玩意儿

03、于是redux提供了这么一个东西解决这个问题

# counter组件
import {bindActionCreators},createStore  from 'redux';
const actions = {
    add: () => ({type: 'add', val: 1}),
    minus: () => ({type: 'minus', val: 1})
}
const boundActions = bindActionCreators(actions, store.dispatch)

04、看完整使用

# counter组件

import React from 'react';
import {bindActionCreators},createStore from 'redux';
import createStore from 'redux';
//定义reducer
let initialState = {num: 0}

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'add':
            console.log(1)
            return {num: state.num + action.val}
        case 'minus':
            console.log(2)
            return {num: state.num - action.val}
        default:
            return state
    }
}
let store = createStore(reducer, initialState);

const actions = {
    add: () => ({type: 'add', val: 1}),
    minus: () => ({type: 'minus', val: 1})
}
const boundActions = bindActionCreators(actions, store.dispatch)
export default class Counter extends React.Component {
    state = {num: store.getState().num}
    componentDidMount() {
        this.unsubscribe = store.subscribe(() => {
            this.setState({num: store.getState().num})
        })
    }

    componentWillUnmount() {
        this.unsubscribe()
    }

    render() {
        let {num} = this.state
        return <div>
            <p>{num}</p>
            <button onClick={boundActions.add}>add</button>
            <button onClick={boundActions.minus}>minus</button>
        </div>
    }
}

05、来我们自己实现下 bindActionCreators

# 我自己的redux文件添加如下
export function bindActionCreators(actions, dispatch) {
    const dispatchActions = {}
    for (const actionsKey in actions) {
        if (actions.hasOwnProperty(actionsKey)) {
            dispatchActions[actionsKey] = () => dispatch(actions[actionsKey]())
        }
    }
    return dispatchActions
}

最终我们自己实现的bindActionCreators与实现了原生的效果
😄 666🤭