Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

redux
communitycreator

How to define constants and reducers in Redux

krissanawat

Defining constants

In order to keep constants that we use to define state names, we need to create a new folder named redux and a file named constant.js:

Inside constant.js, we need to add state for the register, login, and home screen fetching:

//ITEM
export const ITEM_FETCHING = "ITEM_FETCHING";
export const ITEM_SUCCESS = "ITEM_SUCCESS";
export const ITEM_FAILED = "ITEM_FAILED";
//Login
export const LOGIN_FETCHING = "LOGIN_FETCHING";
export const LOGIN_FAILED = "LOGIN_FAILED";
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
// Register Page
export const REGISTER_FETCHING = "REGISTER_FETCHING";
export const REGISTER_SUCCESS = "REGISTER_SUCCESS";
export const REGISTER_FAILED = "REGISTER_FAILED";

Reducer

Next, we need to create a new folder that will contain reducers and actions:

Then, we need to create three reducer files and index to register all reducers:

In order to start on register.reducer.js and import the constants that we have defined before:

import {
    REGISTER_FETCHING,
    REGISTER_FAILED,
    REGISTER_SUCCESS,
} from "../constant";
const initialState = {
    isFetching: false,
    isError: false,
    result: null,
};
export default (state = initialState, { type, payload }) => {
    switch (type) {
        case REGISTER_FETCHING:
            return { ...state, isFetching: true, isError: false, result: null };
        case REGISTER_FAILED:
            return { ...state, isFetching: false, isError: true, result: null };
        case REGISTER_SUCCESS:
            return { ...state, isFetching: false, isError: false, result: payload };
        default:
            return state;
    }
};

In the code above, we performed the following operations:

  1. Import constant from constant.js.
  2. Define initial state value
  3. When we trigger the REGISTER_SUCCESS state, the value will change as defined

For other reducers, we can do the same by changing the prefix names shown in the code snippet below:

import { ITEM_FETCHING, ITEM_FAILED, ITEM_SUCCESS } from "../constant";
const initialState = {
    isFetching: false,
    isError: false,
    result: null,
};
export default (state = initialState, { type, payload }) => {
    switch (type) {
        case ITEM_FETCHING:
            return { ...state, isFetching: true, isError: false, result: null };
        case ITEM_FAILED:
            return { ...state, isFetching: false, isError: true, result: null };
        case ITEM_SUCCESS:
            return { ...state, isFetching: false, isError: false, result: payload };
        default:
            return state;
    }
};

Finally, we need to register all reducers to index.reducer.js:

import { combineReducers } from "redux";
import loginReducer from "./login.reducer";
import registerReducer from "./register.reducer";
import itemReducer from './item.reducer'
export default combineReducers({
    loginReducer,
    registerReducer,
    itemReducer
});

When using the plugin to activate redux in index.js, we need to install some redux dependencies of ReactJS:

yarn add redux react-redux redux-thunk redux-logger

After installation, we need to import them to App.js and the index.reducer.js file:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import logger from "redux-logger";
import reducers from "./redux/reducer/index.reducer";

Example

Below is an example of how to use middleware on redux when we are in production. We do not want to show log, so we can use the environment variable as shown below:

var middlewares = null;
if (process.env.REACT_APP_IS_PRODUCTION === "1") {
  middlewares = applyMiddleware(thunk);
} else {
  middlewares = applyMiddleware(thunk, logger);
}

To initialize the reducer, we need to use the createStore method from redux:

const store = createStore(reducers, middlewares);

Then, we can plug redux in using the Provider component:

return ( 
    <NavigationContainer>
         <Provider store={store}>

RELATED TAGS

redux
communitycreator

CONTRIBUTOR

krissanawat
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring