How to access array (object) elements in redux state

Question

Using React/Redux, I have a simple react game where a user responds to a prompt from a number of choices, I want to log the response and whether it is correct. I have a 'GAME_BEGIN' reducer like

case 'GAME_BEGIN':
  return {
    ...state,
    timeRemaining: action.timeRemaining,
    gameIsInProgress: true,
    problems: [
      {
        problem: action.problem, // string
        solution: action.solution, // string
        incorrectResponses: action.incorrectResponses, // array of strings
      }
    ]
  };

And now I want to add response and isCorrect attributes to the first problem object on action 'GAME_SUBMIT_RESPONSE', then add a new problem to the problems array. So after a few iterations (there can be many problems), I was thinking state should look like

...state,
problems: [
  {
    problem: something, // string
    solution: something, // string
    incorrectResponses: something, // array of strings
    response: something,
    isCorrect: somethingBool
  },
  ...
  {
    problem: action.problem, // string
    solution: action.solution, // string
    incorrectResponses: action.incorrectResponses, // array of strings
  }
]

For the first problem I might add attributes by just rewriting the entire problems array, but how about once I add new objects?

Or am I thinking about this in the wrong way. I also thought I could flatten out the state and get rid of the problems array altogether, resetting the problem on each submit and loggin the necessary data to the DB via api call. Is this the intended way of doing things?

It is not clear what you want to do. Do you need the answers to the previous questions? In general the store represents the state of your application, and you choose what that is. If you need to add an object to the array, or mutate one of the elements, it works just like any usual javascript object. — JulienD
– JulienD, Commented Oct 5, 2017 at 13:45
Hmmm, I thought so, but for example, returning ...state, state.problems[state.problems.length - 1].response: action.response in the GAME_SUBMIT_RESPONSE reducer doesn't work, I just get an error. I could rewrite the whole problems array on every response, but that is going to get big if they answer a lot of questions. — TrivialCase
– TrivialCase, Commented Oct 5, 2017 at 13:49

JulienD · Accepted Answer · 2017-10-05 13:56:58Z

3

What about copying your state first

let newState = {...state};

then you update one of the elements/values like any other JS object

newState.problems[2].response = 42;

then you return it?

return newState;

A reducer is just a function, you don't have to return right away. A one-liner is not impossible, but likely unreadable (slice, concat, ...).

answered Oct 5, 2017 at 13:56

JulienD

7,32310 gold badges57 silver badges88 bronze badges

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

1 Comment

TrivialCase Over a year ago

sigh I'm an idiot, this is probably the first thing I should have considered... Thanks!

Collectives™ on Stack Overflow

How to access array (object) elements in redux state

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related