Getting a project setup is rarely easy. Luckily, we have a quick script that can do the work for us.

Welcome! In this tutorial series we'll be exploring Redux, a tool for predictably managing state in your app.

Running`> npm run setup` will do the following:

You'll find this "setup" script located in your*package.json*.

We'll be installing a lot of scripts from terminal. You may also want to consider installingtheatom package["platformio-ide-terminal"](https://github.com/platformio/platformio-atom-ide-terminal), which provides a terminal insideyoureditor.

In Redux, the**store** is the boss. Think of the**store** as holdingthe"single source of truth" ofyourapplication data.

Once created, the**store** has several helpful methods:

-`getState` to read the current data of your app.

-`dispatch` to trigger actions. We'll look at actions more later.

-`subscribe` to listen for state changes

The "single source of truth".

conststore=createStore(reducer, initialState);

Let's get started by settings up the**store** for your Redux app.

Events that change the data.

An**action** is a named event that can trigger a change in your application data.

Actions are often broken into three parts to make your code more readable.

An**action** includes a named "type".

constaction= { type:'ACTION_NAME' };

Actions may also include other possible params needed to transform that data.

constgetItem= { type:'GET_ITEM', clientId:42, payload: { id:12 } };

Normal params passed in are often put inside of a`payload` object. This is part of a standard called[Flux Standard Action](https://github.com/acdlite/flux-standard-action). Other common fields include`error` &`meta`.

An**action creator** is a functions that creates an action.

constactionName= ()=> ({ type:'ACTION_NAME' });

Action creators make it easy to pass params into an action.

constgetItem= (clientId,id)=> ({ type:'GET_ITEM', clientId:42, payload: { id:12 } });

Often, the action name is also extracted as an**action type**. This is helpful for readability and to catch action name typos. Additionally, most editors will auto-complete your action types from the variable name.

constACTION_NAME='ACTION_NAME';

constGET_ITEM='GET_ITEM';

constaction= ()=> ({ type:ACTION_NAME });

constgetItem= (id)=> ({ type:GET_ITEM, payload: { id }});

Let's write an action for voting up your choice of worst pokemon.

The data transformation

A**reducer** is what handles the actual data transformation triggered by an action.

In it's simplest form, a**reducer** is just a function with the current**state** and current**action** passed in.

constreducer= (state)=> {

constreducer= (state,action)=> {

console.log(state);

return state;

};

We can handle different actions by matching on the action type. If no matches are found, we just return the original state.

constACTION_NAME='ACTION_NAME';

constreducer= (state,action)=> {

switch(action.type) {

caseACTION_NAME:

state=42;

return state;

default:

return state;

}

};

Our reducer is passed in as the first param when we create our**store**.

State is "read only".

One such guideline: reducers must be pure functions.

When an action passes through a reducer, it should not "mutate" the data, but rather return a new state altogether.

Notes

constnextPokemon=state.pokemon.map(p=> {

if (id===p.id) {

p.votes+=1;

}

return p;

});

return {

pokemon: nextPokemon

};

caseADD_TO_ARRAY:

state.push(42);// push mutates the state

return state;

If multiple actions were pushing into the state, the functions are no longer**pure** and thus no longer fully predictable.

By returning an entirely new array, we can be sure that our state will be**pure** and thus predictable.

caseADD_TO_ARRAY:

returnstate.concat(42);// returns a new array, with 42 on the end

Let's give writing pure reducers a try as we implement our`VOTE_UP` action.

Create modular, composable reducers with`combineReducers`.

In Redux, we are not limited to writing a long, single reducer. Using`combineReducers` allows us to create modular, composable reducers.

As our state is an object, for example:

{

pokemon: [... ],

users: [... ]

}

We can create a reducer to handle data transformations for each key in our state.

{

pokemon: pokemonReducer,

users: usersReducer

}

Explanation here.

As our app grows, we can now think of the data in smaller chunks.

Let's try refactoring our app to use`combineReducers`.

Refactor your project into different files.

Our "index.js" file is getting a little long. Of course, our app will be more maintainable if we can divide it across different, well structured files.

There are different ways of structuring your app:

- store.js

- action-types.js

- action-creators.js

- reducers.js

- store.js

- reducers.js

- modules

- pokemon

- index.js

- store

- reducers.js

- modules

- pokemon

- actions.js

- reducer.js

- action-types.js

The powerofmiddleware with "redux-logger".

We still haven't touched on oneofthe most powerful features of Redux:**middleware**.

Explanation here.

Middleware is triggered on each action.

Middleware is created with the`store`. In it's most basic form, middleware can look like the function below:

conststore=>next=>action=> {

returnnext(action);

}

Let's try out the power of middleware with "redux-logger".

Creating a "SORT_BY_POPULARITY" action.

Notice how the votes remain out of order. Let's create a sorting action for putting the highest votes at the top.

For this, we'll use a sorting function. A sorting function takes two values, and returns either:

-`1`: move ahead

-`-1`: move behind

-`0`: no change

See an example for sorting votes below:

functionsortByVotes(a,b) {

}

Using thunks for async actions.

As we've seen in the previous steps, thunks sound more complicated than they really are. A thunk is just a function that returns a function.

Inside of middleware, we can determine if an action is returning a function.

conststore=>next=>action=> {

if (typeof action==='function') {

}

returnnext(action);

}

If it is a thunk, we can pass in two helpful params:

As we'll see,`dispatch` alone can allow us to create async or multiple actions.