CODEWITHSUNDEEP
reactjsredux
futuregerald
futuregerald

Reputation: 146

Having trouble wrapping my head around using redux states in React

**Update

I've updated the reducer to be:

const initialState = {
step: 1,
indibiz: "individual",
firstName:"first",
lastName: "last",
email: "email",
choice: "null",
emailNews: "no",
dob: "1",
mobileNumber: "1234567890",
island: "St. Lucia",
industry: "Astronaut",
Skill: "Space Monkey",
createClick: false
}
export default function (state = initialState, action) {
switch (action.type) {
case "SELECT_BUSINESS":
  console.log(state);
  return { ...state, indibiz: action.payloadEvent }
  break;

}
 return state;
}

Now I see the following in my console.log that it's logging the object from initialstate. But if I try and and log the following in that same component: {console.log(this.props.selectindibusi.indibiz)} Then it returns undefined. Isn't it supposed to have the initialValue that is setup in the reducer?

**Update over

I am am using react and currently trying to learn to use Redux and use it in a project I'm doing. The issue is that I feel like I don't fully understand reducers. Below is my reducer index:

import {combineReducers} from 'redux';
import signupState from './reducer-signup.js';
import TestReducer from './testalertreducer.js';
import Selectindibusi from './reducer-select_indy_biz.js';

const allReducers = combineReducers({
  signupState: signupState,
  selectindibusi: Selectindibusi,
});

In my signupState reducer I have:

export default function () {
  return ({
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  });
}

Below is the action:

export function selectindibusi(signupState, event) {
  const SELECT_BUSINESS = "random string";
  console.log(signupState);

  return {
    type: "SELECT_BUSINESS",
    payloadState: signupState,
    payloadEvent: event.target.value
  };
}

And below is the reducer that is listening for that action:

export default function (state = [], action) {
  switch (action.type) {
    case "SELECT_BUSINESS":
    console.log(state);

    return { ...state, indibiz: action.payloadEvent }
    break;    
  }

  return state;
}

I am caling this action in an onChange action on a dropdown that looks like:

             <select className="formSelector100"  onChange={this.props.selectindibusi.bind(this,this.props.signupState)}>
                <option value="individual">Individual</option>
                <option value="business">Business</option>
              </select></label>

In the action I can consolelog the data being passed. The problem is it's not updating the data in the signupState reducer, or creating a new object that I can access.

On my component if I try to display {this.props.signupState.indibiz} the value is the same as the default value in the reducer, it's not updated. I feel like I'm missing something fundamental here and i'd appreciate any help.

Upvotes: 2

Views: 237

Answers (1)

finalfreq
finalfreq

Reputation: 6980

According to your response, if the console log of state is returning an empty array then:

export default function () {
  return ({
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  });
}

isn't being set as state. How you should be doing this is 

const initialState = {
    step: 1,
    indibiz: "individual",
    firstName:"first",
    lastName: "last",
    email: "email",
    choice: "null",
    emailNews: "no",
    dob: "1",
    mobileNumber: "1234567890",
    island: "St. Lucia",
    industry: "Astronaut",
    Skill: "Space Monkey",
    createClick: false
  }

and then in your signupState reducer 

export default function (state = initialState, action) {
  switch (action.type) {
    case "SELECT_BUSINESS":
       console.log(state);
       return { ...state, indibiz: action.payloadEvent }
    break;    
  }

  return state;
}

as of now how you have it setup your reducers are not receiving the correct initial state hence why it thinks state is an empty array.

Upvotes: 3

Related Questions