Premium Courses

Learn practical web development building multi user SEO blog app in Laravel. A Journey from localhost to live server.

Learn the fastest growing and high in demand React Js in short period of time along with ES6. Build a Newsapp while learning.

A complete beginners guide to Web Development. Master the art of building Responsive web pages with this course. Learn to code from scratch!


Redux Workflow - Guide for absolute beginners to redux

Redux Workflow - Guide for absolute beginners to redux

Category: Redux   Updated by Ryan Dhungel



This article is not much of a Redux tutorial. Please visit Official Redux site for proper walkthrough and explanation. This articles shows the code that is presented in a step by step manner. It is easy to follow for beginners. You can create a simple js file and run this code for learning purpose or use something like jsbin.

// initial state
const initialState = {
  todos: [
    {
        text: 'Eat food'
    }, 
    {
        text: 'Exercise'
    }
  ]
}

// create a simple action types 
const ADD_TODO = 'ADD_TODO'

// create some action creators
function addTodo(text) {
    return {
        type: ADD_TODO,
        text: text
    }
}

// create some reducers
function postsReducer(state = [], action) {
    switch(action.type) {
        case ADD_TODO:
            return [...state.todos, {text: action.text}]
        default:
            return state
    }
}

console.log('initial state', initialState)

// make changes to initial state
const action = addTodo('make it work')
const newState = postsReducer(initialState, action)
// RESULT: initial state {todos: Array(2)}

// new state after changes
console.log('New State: ', newState)
// RESULT: New State:  (3) [{…}, {…}, {…}]‚Äč


Back to articles