使用mapDispatchToProps和this.props.dispatch()有什么区别

苏达山

谁能提供-mapDispatchToPropsthis.props.dispatch()

  • 何时使用哪一个?
  • 这与ReduxThunk有关吗

我下面的代码使用 this.props.dispatch

    /*Action-Navigation*/
/*Navigation Action*/

const init = () => {
    return (dispatch) => {
        dispatch ({
            type : 'NAV_LINKS',
            data : ['Home', 'Summary']    
        })
    }
}

/*Component-Navigation*/
class Navigation extends React.Component {
    constructor(props){
        super(props);
        this.state = {
    };
    }
  componentWillMount() {
    this.props.dispatch(init());   
  }
  componentWillReceiveProps(props){
    console.log(props);
  }
  render() {
    return (
      <div className="navigation-wrap">
        <div className="navigation-header">
          Navigation
        </div>
        {this.props.navigationReducer.navigationLinks.map((links, index) => <div key={index}>{links}</div>)}
      </div>
    )
  }
}

const mapStateToProps = (state={}) => {
    return {
        navigationReducer : state.navigationReducer,
        navigationLinks : state.navigationReducer.navigationLinks
    }
}


let NavigationContainer = ReactRedux.connect(mapStateToProps)(Navigation);


/*Reducer-Navigation*/
/*Navigation Reducer*/

let initialState = {}; 
const navigationReducer = (state=initialState, action) => {
    switch(action.type){
        case 'NAV_LINKS':
            return Object.assign(state, {
                navigationLinks : action.data
            })
        default:
            return state
    }
}

/*Reducer-Index*/
/*combine all reducers*/

const reducers = Redux.combineReducers({
    navigationReducer
});

/*App*/
/*Create a store*/
const store = Redux.createStore(
    reducers,
    Redux.applyMiddleware(ReduxThunk.default)
);

/*Render component to DOM*/
const render = () => {
    ReactDOM.render(
        <ReactRedux.Provider store={store}>
            <NavigationContainer />
        </ReactRedux.Provider>,
        document.getElementById('rootApp')
    );
}

render();
哈约格

使用redux connect时,mapDispatchToProps使dispatch方法可用于您的道具。这就是为什么您有权this.props.dispatch()在组件中执行操作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

reactJS的props和refs有什么区别?

React中的state和props有什么区别?

const {document} = this.props和({document} = this.props)有什么区别

mapDispatchToProps和matchDispatchToProps有什么区别

使用es6类时,React中的“ super()”和“ super(props)”有什么区别?

Vue.js $ emit和$ dispatch有什么区别?

dispatch和bindActionCreators之间有什么区别?

JMeter中的props和vars对象之间有什么区别

在Redux中-使用store.dispatch()和dispatch()有什么区别吗?

当我们只能使用this.props.dispatch来分派动作时,mapDispatchToProps有什么用

DISPATCH_QUEUE_CONCURRENT和DISPATCH_QUEUE_SERIAL有什么区别

dispatch_get_global_queue和dispatch_queue_create有什么区别?

mapstatetoprops和mapdispatchtoprops之间有什么区别

使用redux-thunk和直接调用dispatch()有什么区别

DISPATCH_QUEUE_CONCURRENT和全局并发调度队列之间有什么区别

Redux中间件中的dispatch和next之间有什么区别?

performSelectorOnMainThread:和主队列上的dispatch_async()有什么区别?

GCD中的Dispatch_barrier_async和串行队列,它们之间有什么区别?

“ as?”,“ as!”和“ as”有什么区别?

$ _和!$有什么区别?

[=] 和 [this] 有什么区别?

ö和ö有什么区别?

/ * ... * /和/ ** ... * /有什么区别

+ =和= +有什么区别?

$ *和$ @有什么区别

{}())和{})()有什么区别

'$(this)'和'this'有什么区别?

= +和+ =有什么区别

=>和->有什么区别?