Redux分派未触发

Question

My call to the dispatcher isn't working. What I want to do is to fire a dispatcher in componentWillMount to update something in the initial state.

I have my reducer set up as follows:

// initial state
const pagesInitialState = {
    begin: false,
    basicInfo: false,
    location: false,
    education: false,
    summary: false
}

const CHANGE_PAGE_STATUS = 'CHANGE_PAGE_STATUS';

// action creator
const changePageStatus = (page) => ({
    type: CHANGE_PAGE_STATUS,
    page
})

// dispatcher
export const dispatchShowPages = (page) =>
    dispatch => {
        console.log('not here');
        dispatch(changePageStatus(page))
}

// reducer
export default function (state = pagesInitialState, action) {
    switch (action.type) {
        case CHANGE_PAGE_STATUS:
            let pages = Object.assign({}, state);
            let pageToChange = action.page;
            if (pages.pageToChange === true) {
                pages.pageToChange = false
            } else {
                pages.pageToChange = true
            }
            return pages
        default:
            return state
    }
}

I have my routes set up as follows:

import React from 'react';
import {Route, Router} from 'react-router-dom';
import history from './history'
import Main from './components/containers/Main'

import { dispatchShowPages } from './reducers/loadPages'

class Routes extends React.Component {

  componentWillMount () {
    dispatchShowPages('begin')
  }

  render () {
    return (
      <Router history={history}>
        <Main />    
      </Router>
    )
  }
}

export default Routes;

In a different file I have

ReactDOM.render(
    <Provider store={store}>
        <Routes />
    </Provider>,
    document.getElementById('app')
)

I am hoping the dispatcher would change 'begin' in the initial state from false to true. But it doesn't seem to be to hitting that dispatcher. It gets to dispatchShowPages but not in the dispatch. My console.log('here') in the dispatcher isn't logging. What am I wiring wrong?

Answer 1

Your dispatchShowPages function is never called because your function is "curried"

function mapDispatch (dispatch) {
  return {
    dispatchShowPages (page) {
       dispatch(changePageStatus(page))
    }
  }
}

export default connect(mapState, mapDispatch)(App)

Answer 2

I don't think you need dispatchShowPages in your reducer since you already have the action creator there. All you need to do is to use the Redux's connect function like so:

import { connect } from 'react-redux';
import { changePageStatus } from './reducers/loadPages'

class Routes extends React.Component {

  componentWillMount () {
    this.props('begin')
  }

  render () {
    return (
      <Router history={history}>
        <Main />    
      </Router>
    )
  }
}

const mapDispatchToProps = dispatch => ({
  showPage: page => dispatch(changePageStatus(page))
});

export default connect(null, mapDispatchToProps)(Routes);

And don't forget to export changePageStatus out from your loadPages file.