A state is undefined object when using React and Redux , Router

Question

Im developing apps with React and Redux , Router. But now I can't set(update) a state into the state of 'mapStateToProps' function. So a reducer's args 'action' is 'undefined'. I think the cause of this problem is that mapStateToProps's args is not passed from anywhere.

Does anyone know how to pass a state(data input from client) into mapStateToProps function?

My mapStateToProps function is simply written like this.

const mapStateToProps = state=>{
console.log(state);  // this 'state' return undefined.
return {
loginform: state
}};

export default connect(mapStateToProps)(LoginForm)

Here is my code.

Index

/index.js

let store = createStore(showUsername,
window.devToolsExtension && window.devToolsExtension() );

ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
    <Route component={AppNavBar}>
        <IndexRedirect to='/login'>
        <Route path='/login' component={LoginForm} />
    </Route>
</Router>
</Provider>
,
document.getElementById('root')
);

Component

/Loginform.js

class LoginForm extends Component {
    ...
}

const mapStateToProps = state=>{
console.log(state);  // this 'state' return undefined.
return {
    loginform: state
}};


export default connect(mapStateToProps)(LoginForm)

ActionCreator

/actioncreator.js

    export const showusername = 'showUsername';

    export const showUsername =(username,index)=>{
    console.log(username,index);
    return{
        type:showusername,
        username,
        payload:index
    }

    };

#Reducer

/reducer.js

    const initialState = {
            username: '',
            password: '',
            submit: false,
            //request: 'self',
            showselectfield: false
        };

    export default function showUsername(state = initialState, action) {
    switch (action.type) {
      case type.showusername:
      return (
          Object.assign({},initialState ,{username:action.username,password:action.password})
          );

    default:
      return state
  }
}

Thanks,

Shubham Khatri · Accepted Answer · 2016-12-29 10:25:44Z

0

In your reducer when you check for the action that was triggered, you are checking for type.showusername but since you already have action.type in the switch case you should check for simply the string value i.e. "showusername"

const initialState = {
            username: '',
            password: '',
            submit: false,
            //request: 'self',
            showselectfield: false
        };

    export default function showUsername(state = initialState, action) {
    switch (action.type) {
      case "showusername":
      return (
          Object.assign({},state ,{username:action.username,password:action.password})
          );

    default:
      return state
  }
}

edited Dec 29, 2016 at 10:25

answered Dec 29, 2016 at 9:13

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

yasu Over a year ago

Thanks! I changed the case value and worked well.But still 'action.username' is undefined.

Shubham Khatri Over a year ago

Are you able to see username in the actionCreator console.log() statement

yasu Over a year ago

When I see console.log(username) , it shows undefined.

yasu Over a year ago

I also set console.log(state) inside of mapStateToProps function, but the state show undefined too. So I was thinking this is the cause of problem. Is this normal the state of mapStateToProps function show undefined?

Shubham Khatri Over a year ago

showusername takes the username as a input argument, how are you providing that because otherwise it will return null

|

Collectives™ on Stack Overflow

A state is undefined object when using React and Redux , Router

Index

Component

ActionCreator

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Index

Component

ActionCreator

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related