CODEWITHSUNDEEP
reactjsredux
Mehran
Mehran

Reputation: 16851

React + Redux: undefined initial state and reducer not called as expected

I think this is pretty primitive. I'm having trouble with two things:

1.this.props.appState is undefined in the constructor. This is unexpected because in the reducer I have the initial state set to { appState: { name: "World!" } } and I was expecting this lead to initialization of the appState. So I added the if statement which I know is just a temporary fix before I find the actual issue.

2.When I click on the button and call the sendAction handler, the execution flow never reaches the reducer function!

class App extends React.Component {
  constructor(props) {
    super(props);
    if (this.props.appState) {
      this.state = { name: this.props.appState.name };
    }
    else {
      this.state = { name: "Unknown" };
    }
    this.nameChanged = this.nameChanged.bind(this);
    this.sendAction = this.sendAction.bind(this);
  }

  nameChanged(event) {
    this.setState({ name: event.target.value });
  }

  sendAction(event) {
    this.props.saveName(this.state.name);
  }

  render() {
    return (
      <pre>
        <h1>Hello, {this.state.name}!</h1>
        <input type="text" value={this.state.name} onChange={this.nameChanged} />
        <input type="button" value="Click me!" onClick={this.sendAction} />
      </pre>
    );
  }
}

const appReducer = (state = { appState: { name: "World!" } }, action) => {
  debugger;
  switch (action.type) {
    case "SAVE_NAME":
      return Object.assign({}, state, { name: action.name });

    default:
      return state;
  }
};

const AppContainer = ReactRedux.connect(
  state => ({ appState: state.appState }),
  dispatch => ({
    saveName: (name) => Redux.bindActionCreators({ type: "SAVE_NAME", name }, dispatch)
  })
)(App);

const combinedReducers = Redux.combineReducers({
  appReducer
});

const store = Redux.createStore(combinedReducers);

ReactDOM.render(
  <ReactRedux.Provider store={store}>
    <AppContainer />
  </ReactRedux.Provider>,
  document.getElementsByTagName('main')[0]
);

Upvotes: 4

Views: 1608

Answers (1)

WilomGfx
WilomGfx

Reputation: 2013

Since your reducer is called : appReducer, you will need to access the appState property on appReducer.appState in mapStateToProps like so

const AppContainer = ReactRedux.connect(
  state => ({ appState: state.appReducer.appState }),
  dispatch => ({
    saveName: (name) => Redux.bindActionCreators({ type: "SAVE_NAME", name }, dispatch)
  })
)(App);

For you second problem you can either do

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    saveName: (name) => {
      dispatch({ type: "SAVE_NAME", name })
    }
  }
}

Or have this defined like so.

const actionCreators = {
    saveName: (name) => {
       return { type: "SAVE_NAME", name }
     },
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators(actionCreators, dispatch);
}

And then in connect

const AppContainer = ReactRedux.connect(
              state => ({ appState: state.appReducer.appState }),
              mapDispatchToProps,
              })
            )(App);

Upvotes: 3

Related Questions