Anna Garcia Anna Garcia -4 years ago 176
React JSX Question

Understanding a basic implementation of Redux | how is prevState used?

I'm looking at this example of a super basic implementation of redux from this article. I understand it except where dispatch uses

prevState
. First off where does this function get prevState? How is this related to the actually state that counter needs? Does it implicitly set another value in the state called prevState? I'm just having a hard time understanding how the state actually gets passed to dispatch and then counter through prevState. I think this is probably a functional programming idea that I just haven't grasped yet. Thanks for helping me understand!



import React, { Component } from 'react';

const counter = (state = { value: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 };
case 'DECREMENT':
return { value: state.value - 1 };
default:
return state;
}
}

class Counter extends Component {
state = counter(undefined, {});

dispatch(action) {
this.setState(prevState => counter(prevState, action));
}

increment = () => {
this.dispatch({ type: 'INCREMENT' });
};

decrement = () => {
this.dispatch({ type: 'DECREMENT' });
};

render() {
return (
<div>
{this.state.value}
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
</div>
)
}
}




Answer Source

React.Component.prototype.setState

Well react's setState method is responsible for prevState here – not redux, just to be clear.

Let's look at how setState can be used. We have 3 options ...

  1. setState(nextState) - just pass the next state and React will update the components state accordingly
  2. setState(nextState, callback) – optionally specify a callback that is called once the component is re-rendered – a React component will re-render whenever state is updated – Note: React docs generally recommend to use componentDidUpdate lifecycle method for this instead.
  3. setState((prevState, props) => nextState) – call with a function that conveniently binds prevState and props identifiers for us to manually update our state. It's expected that the function we provide returns the next state

So you have this

this.setState(prevState => counter(prevState, action));

If it's not obvious, the code example you've provided is using #3. So, the first parameter prevState will be provided by React which is the current state of the component. The second parameter props is not used here, so we'll just ignore it (tho the general idea is you could use props to update your state if relevant).


What is prevState?

What exactly is prevState? Well we established that it's the current state of your component, which we initialized earlier in the Counter as

state = counter(undefined, {});
// => { value: 0 }

So when we dispatch an INCREMENT we will get something along the lines of

this.setState(prevState => counter({value: 0}, {type: 'INCREMENT'})

In which case counter (reducer) will return

{value: 1}

This return value is what will be the next state of the Component


Repeated applications of setState

Of course if we were to INCREMENT again, we'd have something like

this.setState(prevState => counter({value: 1}, {type: 'INCREMENT'})

Where counter would return

{value: 2}

which becomes the next state of the Component

and so on..


"Where is line between React and Redux?"

To start, the React-specific code is the import and the Counter class which extends Component.

"But what is the other code (counter) then?"

One of the coolest things about redux is its state of nothingness – Redux only exists in this code example as a pattern. There's no import which uses the redux or react-redux. Redux is used here more as an implementation of the idea/philosophy of redux – which is built around this idea of unidirectional flow of data and composable reducers.

"What is a reducer?"

A reducer is simply a function which, when applied to a state and an action, returns a new state.

Of course the redux library includes some helpful utilities which make it easier to implement Redux's patterns within your application – but really, they're all incredibly simple functions. In fact, the creator of Redux, Dan Abramov, has an awesome (FREE) series on egghead, Getting Started with Redux which shows you exactly how Redux works, piece by piece. In my opinion, it is one of the best coding video series ever created, on any topic.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download