I was trying to get input with redux,all is fine but I can't figure out how to get input values

user_11711823 0
Viewed 28

Trying to get user input with action,all is working i get my console.logs about how inputVal changes,but when I try to print this in

i get undefined in console

Should I use like mapDispatchToProps or I don't need this,since I'm passing actions as second param into mapStateToProps

actions:

export const inputChange = val => {
  return {
    type: INPUT_CHANGE,
    payload: val
  };
};

reducer:

import { INPUT_CHANGE } from './actionTypes';

const initialState = {
  inputVal: ''
};

export default (state = initialState, action) => {
  switch (action.type) {
    case INPUT_CHANGE:
      return {
        ...state,
        inputVal: action.payload
      };
    default:
      return state;
  }
};

mainPage:

const mapStateToProps = state => {
  console.log(state);

  return state;
};

class MainPage extends Component {

  onInput = e => {
    this.props.inputChange(e.target.value);
    console.log(this.props.inputChange(e.target.value));
  };

  render() {
    console.log(this.props.inputVal);
    return (
      <div>
         <input onChange={this.onInput}></input>
        <p>{this.props.}</p>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  {
    addToCart,
    removeFromCart,
    selectItem,
    inputChange
  }
)(MainPage);

combinedReducers:

import { combineReducers } from 'redux';
import AddItem from './addItem/reducer';
import InputReducer from './reducerInput';

export default combineReducers({
  AddItem,
  InputReducer
});

I've tried to this.props.inputVal.

react-redux redux
1 Answers

Since you have combineReducers, you should use these keys to access in mapStateToProps.

From the redux docs:

The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()

You can control state key names by using different keys for the reducers in the passed object. For example, you may call combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) for the state shape to be { todos, counter }.

So your mapStateToProps must be like:

const mapStateToProps = state => {
  console.log(state);

  return {
     inputVal: state.InputReducer.inputVal
  }
};

A minimal working code sandbox:

https://codesandbox.io/s/cold-meadow-pxtu3

user_117174580
Related