本项目为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🤭