JAVASCRIPT

redux toolkit with redux persist

import {configureStore} from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage'
import {combineReducers} from "redux"; 
import { persistReducer } from 'redux-persist'
import thunk from 'redux-thunk'

const reducers = combineReducers({
 //...            
});

const persistConfig = {
    key: 'root',
    storage
};

const persistedReducer = persistReducer(persistConfig, reducers);


const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk]
});

export default store;

redux toolkit

> npm install @reduxjs/toolkit react-redux

# then follow along from here to install RTK to codebase
# https://redux-toolkit.js.org/tutorials/quick-start#create-a-redux-store

redux toolkit

If you are installing redux in an existing react project,
please be sure alter the index.js file to include the provider and
store from the redux module and app folder respectively. 

redux toolkit

yarn add @reduxjs/toolkit
// with template
yarn add @reduxjs/toolkit react-redux

redux toolkit store

// store.js

import { configureStore } from '@reduxjs/toolkit'

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


// index.js 

import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

redux toolkit

yarn add @reduxjs/toolkit react-redux

redux toolkit with redux persist

import store from './app/store';
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'

let persistor = persistStore(store);

    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
        <App/>
        </PersistGate>
    </Provider>,

redux js toolkit

// Redux + Plain JS template
npx create-react-app my-app --template redux

// Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

reduxjs toolkit createaction

createAction('tagsLoadSuccess', (tags: string[]) => {
  return {
    payload: tags,
  };
})

redux toolkit and folder structure

1npx create-react-app my-app --template redux