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>
)
}

最后

以上就是秀丽哑铃为你收集整理的redux总结connect使用装饰器react hooks - redux的全部内容，希望文章能够帮你解决redux总结connect使用装饰器react hooks - redux所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。