redux总结

connect使用

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

示例

• connect(mapState,null)

当不传递第二个参数(或为null)时，可以直接在当前组件的this.props.dispatch拿到dispatch方法

function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps)(TodoApp)

==============调用==================
	this.props.dispatch({
      type:ChangeColor,
      payload:{
        color:e.target.value
      }
    })

• connect(mapState,mapDispatch: Function)

当第二个参数为一个函数时，需要把dispatch作为参数传入，该函数返回一个对象，每个键对应着一个函数，在这里面需要显式的调用传进来的dispatch方法；

// mapDispatch为一个函数
const mapDispatchToProps = (dispatch) => ({
  changeColor : (value) => (dispatch({
    type:ChangeColor,
    payload:{
      color:value
    }
  })),
})

==============调用==================
this.props.changeColor(value)

• connect(mapState,mapDispatch: Object)

当第二个参数为一个对象时，这时不用再把dispatch传递进去并显式的调用

// mapDispatch为一个对象
const changeColor = (v) => ({
  type:ChangeColor,
  payload:{
    color:v
  }
})
const mapDispatchToProps = {
  changeColor ,
}

==============调用==================
this.props.changeColor (value)

装饰器

插件plugin-proposal-decorators

• Without a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

• sing a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

react hooks - redux

使用useContext和useReducer构建小型redux

• reducer

export const defaultState = {
    value: 0
}

export function reducer(state, action) {
    switch(action.type) {
        case 'ADD_NUM':
            return { ...state, value: state.value + 1 };
        case 'REDUCE_NUM':
            return { ...state, value: state.value - 1 };
        default: 
            throw new Error();
    }
}

• Content

import React, { useReducer, createContext } from 'react'
import { ChildFirst } from './ChildFirst'
import { ChildSecond } from './ChildSecond'
import { reducer, defaultState } from './reducer'

export const Context = createContext(null)

export function Content() {
    const [state, dispatch] = useReducer(reducer, defaultState)

    return (
        <Context.Provider value={{state, dispatch: dispatch}}>
            <ChildFirst/>
            <ChildSecond/>
        </Context.Provider>
    )
} 

• ChildFirst

import React, {useContext} from 'react'
import {Context} from './content'

export function ChildFirst() {
    const AppContext = useContext(Context)

    return (
        <div>
            <button onClick={ 
                 () => {
                AppContext.dispatch({
                    type: "ADD_NUM",
                    payload: {}
                  })
                }
            }>addNum</button>
            <button onClick={
                () => {
                AppContext.dispatch({
                    type: "REDUCE_NUM",
                    payload: {}
                    })  
                }
            }>reduceNum</button>
        </div>
    )
} 

• ChildSecond

import React, {useContext} from 'react'
import {Context} from './content'

export function ChildSecond() {
    const AppContext = useContext(Context)

    return (
        <div>
            {AppContext.state.value + 's'}
        </div>
    )
}