Redux Toolkit

Install

npm install @reduxjs/toolkit react-redux
yarn add @reduxjs/toolkit react-redux

Store

src/store.js

import { configureStore } from "@reduxjs/toolkit";
import fooReducer from "./features/fooSlice";

export const store = configureStore({
  reducer: {
    foo: fooReducer,
  },
});

Provider

src/index.js

import { Provider } from "react-redux";
import { store } from "./store";

<Provider store={store}>
	<App />
</Provider>

Slice

src/features/fooSlice.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = { 
    data: ''
}

export const fooSlice = createSlice({
    name:'foo',
    initialState,
    reducers:{
     	fn:(state, actions) => {
         	this.state.data = actions.payload.data
        }   
    }
})

export const { fn } = fooSlice.actions

export default fooSlice.reducer

Dispatch

import { useDispatch } from "react-redux";
import { fn } from '../../fooSlice'

const dispatch = useDispatch();

dispatch(fn({data:'data'}));

state

import { useSelector } from "react-redux";

const data = useSelector(state => state.foo.data);