🚛Redux Configs

Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

How to use

Here we use the Redux variant family Redux, react-redux, redux-thunk, next-redux-wrapper for handle all state managements system. The installation method is as follows below.

Step 1: Set up STORE configs

Adding file & code in ./src/lib/redux/store.js. This is configs supported for handle SSR state & CSR state.

// Vendors
import { createStore, applyMiddleware } from 'redux';
import { HYDRATE, createWrapper } from 'next-redux-wrapper';
import thunkMiddleware from 'redux-thunk';
import combinedReducer from './reducers';

// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };

    return nextState;
  } else {
    return combinedReducer(state, action);
  }
};

const initStore = () => {
  return createStore(reducer, bindMiddleware([thunkMiddleware]));
};

export const wrapper = createWrapper(initStore);

Step 2: Set up reducers configs

Adding file & code in ./src/lib/redux/reducers.js.

// Vendors
import { combineReducers } from 'redux';

// Reducer types
import layout from '@/store/layout/reducers';
import ui from '@/store/ui/reducers';
import i18n from '@/store/i18n/reducers';
import modules from '@/store/modules/reducers';

const combinedReducer = combineReducers({
  layout,
  ui,
  i18n,
  modules,
});

export default combinedReducer;

Step 3: Init actions & reducers

We have example user reducer related to using a reducer. Adding action & reducer in

First we make count reducer adding file & code in ./src/store/modules/user/actions.js & ./src/store/modules/user/reducers.js

actions.js

// Types
import * as types from './types';

export const actionModuleUserStatus = (status) => (dispatch) => {
  return dispatch({
    type: types.STATUS,
    payload: {
      status,
    },
  });
};

reducers.js

import * as types from './types';

// Initial state user
const initialModuleUserState = {
  status: false,
};

// User reducer
export default (state = initialModuleUserState, { type, payload }) => {
  switch (type) {
    case types.STATUS:
      return {
        ...state,
        status: payload.status,
      };
    default:
      return state;
  }
};

Step 4: Implement store wrapper

Adding code in ./src/pages/_app.js

// Configs
import { wrapper } from '@/redux/store';

const App = (props) => {
    return (
        ...        
    )
};

export default wrapper.withRedux(App);