Redux Toolkit

Redux

FLUX PATTERN

REDUX ARCH

import {
  createStore, applyMiddleware, combineReducers, compose,
} from 'redux';
import thunk from 'redux-thunk';
import * as reducers from './reducers';

const ext = window.__REDUX_DEVTOOLS_EXTENSION__;
const devtoolMiddleware = 
  ext && process.env.NODE_ENV === 'development' ? ext() : f => f;

const store = createStore(
 combineReducers({
   ...reducers,
 }),
 compose(
   applyMiddleware(thunk),
   devtoolMiddleware
 )
);

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import * as reducers from './reducers';

const middleware = getDefaultMiddleware({
  immutableCheck: false,
  serializableCheck: false,
  thunk: true,
});

export const store = configureStore({
 reducer: { ...reducers },
 middleware,
 devTools: process.env.NODE_ENV !== 'production',
});

@reduxjs/toolkit Create Store

Redux Create Store

export const PRODUCT_RELEASES_FETCHING = 'PRODUCT_RELEASES_FETCHING';
export const PRODUCT_RELEASES_FETCHED = 'PRODUCT_RELEASES_FETCHED';
export const PRODUCT_RELEASES_FETCHING_ERROR = 'PRODUCT_RELEASES_FETCHING_ERROR';

const productReleasesFetching = () => ({ 
    type: PRODUCT_RELEASES_FETCHING 
});
const productReleasesFetched = (productReleases) => ({
    type: PRODUCT_RELEASES_FETCHED,
    productReleases
});
const productReleasesFetchingError = (error) => ({
    type: PRODUCT_RELEASES_FETCHING_ERROR,
    error
});

export const productReleasesFetching = createAction('PRODUCT_RELEASES_FETCHING');
export const productReleasesFetched = createAction('PRODUCT_RELEASES_FETCHED');
export const productReleasesFetchingError = createAction('PRODUCT_RELEASES_FETCHING_ERROR');

productReleasesFetching();
productReleasesFetched({ productReleases });
productReleasesFetchingError({ error });

@reduxjs/toolkit Create Action

Redux Create Actions

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO': {
      return state.concat(action.payload)
    }
    case 'TOGGLE_TODO': {
      const { index } = action.payload
      return state.map((todo, i) => {
        if (i !== index) return todo
        return {
          ...todo,
          completed: !todo.completed
        }
      })
    }
    case 'REMOVE_TODO': {
      return state.filter((todo, i) => i !== action.payload.index)
    }
    default:
      return state
  }
}

const todosReducer = createReducer([], builder => {
  builder
    .addCase('ADD_TODO', (state, action) => {
      state.push(action.payload)
    })
    .addCase('TOGGLE_TODO', (state, action) => {
      const todo = state[action.payload.index];
      todo.completed = !todo.completed
    })
    .addCase('REMOVE_TODO', (state, action) => {
      return state.filter((todo, i) => i !== action.payload.index)
    })
})

@reduxjs/toolkit Create Reducer

Redux Create Reducer

case "UPDATE_VALUE":
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }

updateValue(state, action) {
    const {someId, someValue} = action.payload;
    state.first.second[someId].fourth = someValue;
}

@reduxjs/toolkit Reducer

Redux Reducer

const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    createPost(state, action) {},
    updatePost(state, action) {},
    deletePost(state, action) {}
  }
})

Redux Toolkit

Redux

FLUX PATTERN

REDUX ARCH

Redux Toolkit

More from Sarhan Azizov