ReactJs Redux Example

Syntax

import { createStore } from 'redux';

const reducer = (state = {}, action) => {
    switch(action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [
                    ...state.todos,
                    {
                        id: action.id,
                        text: action.text,
                        completed: false
                    }
                ]
            };
    }
};

const store = createStore(reducer);

Example

Let's say we want to create a simple todo list application using React and Redux. Here's how we can set up our Redux store:

import { createStore } from 'redux';

const initialState = {
    todos: []
};

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [
                    ...state.todos,
                    {
                        id: action.id,
                        text: action.text,
                        completed: false
                    }
                ]
            };
        case 'TOGGLE_TODO':
            return {
                ...state,
                todos: state.todos.map(todo => todo.id === action.id ? {...todo, completed: !todo.completed} : todo)
            };
        default:
            return state;
    }
};

const store = createStore(reducer);

We can then use this store in our React components to keep track of our todo list.

Output

The output of our Redux todo list application will be a dynamic, interactive list of todos that the user can add or mark as completed.

Explanation

In our example, we first import the createStore function from the Redux library. We then set up a basic reducer function that takes in the current state of our application and an action object that describes what we want to do (in this case, ADD_TODO). Our reducer function returns a new state object based on the action we received.

We then create our Redux store using the createStore function and passing in our reducer function. Our store will keep track of our entire application's state.

Use

ReactJs Redux is a powerful tool for managing the state of complex web applications. By using Redux, you can easily and efficiently manage your application's state, making your code more reliable and scalable.

Important Points

• Redux is a predictable state container for JavaScript applications.
• The core of Redux is the store, which stores the entire state tree of our application.
• To update the state of our application in Redux, we dispatch actions.
• The reducer function takes in the current state of our application and an action, and returns a new state.
• Redux can be used with any UI layer, including React, Angular, and Vue.

Summary

ReactJs Redux is a powerful tool that allows you to manage the state of your web application in a more efficient and predictable way. By creating a single store that holds your entire application's state, you can easily update and interact with your data, making your code more scalable and reliable.