React Redux for Beginners(part_3)

part1 & part2

In part 3 let’s take a look at just redux without react:

Redux without React: Example

You know about all the basics in Redux now. A view dispatches an action on the store, the action passes all reducers and gets reduced by reducers that care about it. The store saves the new state object. Finally, a listener updates the view with the new state.

View -> Action -> Reducer(s) -> Store -> View

Let’s apply these learnings. You can either use your own project where you have Redux installed, or you can open up the following JS Bin: Redux Playground. Now you are going to apply your learnings about actions, reducers, and the store from the last sections. First, you can define your reducer that deals with adding and toggling todo items:

function reducer(state, action) {
switch(action.type) {
case 'TODO_ADD' : {
return applyAddTodo(state, action);
}
case 'TODO_TOGGLE' : {
return applyToggleTodo(state, action);
}
default : return state;
}
}
function applyAddTodo(state, action) {
return state.concat(action.todo);
}
function applyToggleTodo(state, action) {
return state.map(todo =>
todo.id === action.todo.id
? Object.assign({}, todo, { completed: !todo.completed })
: todo
);
}

Second, you can initialize the Redux store that uses the reducer and an initial state. In the JS Bin, you have Redux available as a global variable.

const store = Redux.createStore(reducer, []);

If you are in your own project, you might be able to import the createStore from the Redux library:

import { createStore } from 'redux';
const store = createStore(reducer, []);

Third, you can dispatch your first action on the store.

store.dispatch({
type: 'TODO_ADD',
todo: { id: '0', name: 'learn redux', completed: false },
});

That’s it. You have set up all parts of Redux and interacted with it by using an action. You can retrieve the state by getting it from the store now.

console.log(store.getState());

But rather than outputting it manually, you can subscribe a callback function to the store to output the latest state after it has changed. Make sure to subscribe to the store before dispatching your actions in order to get the output.

const unsubscribe = store.subscribe(() => {
console.log(store.getState());
});

Now, whenever you dispatch an action after the state got updated, the store subscription should become active by outputting your current state. Don’t forget to unsubscribe eventually to avoid memory leaks.

unsubscribe();

A finished application can be found in this JS Bin. Before you continue to read, you should experiment with the project. What you see in the project is plain JavaScript with a Redux store. You can come up with more actions and deal with them in your reducer. The application should make you aware that Redux is only a state container. The state can be altered by using actions. The reducer takes care of the action. It uses the action and the old state to create a new state in the Redux store.

In the next tutorial, you will learn how to connect the Redux state layer to the React view layer.to be continued :)

Source: StackOverflow, Robin Wieruch, Medium, ReactJs, MDN