Skip to main content

Classic Redux Flow ↔ older outdated pattern to set up redux

Install deps

npm i redux react-redux

Create types.js in ../actions

export const ACTION_TYPE = "ACTION_TYPE"

Create reducer in ../reducers

import { ACTION_TYPE } from "../actions/types"
 
 const initState = null
 
 const myReducer = (state=initState, action) => {
   switch (action.type) {
     case ACTION_TYPE:
       return action.payload
     default:
       return state
   }
 }
 
 export default myReducer

combineReducers in ../reducers/index.js

import { combineReducers } from "redux"

import { myReducer } from "./myReducer"

export default combineReducers({
 myRed: myReducer,
})

Create store in ../index.js

import { createStore, applyMiddleware } from "redux";
 import { Provider } from "react-redux";
 
 const store = createStore(reducers, {})

connect mapStateToProps

import { connect } from "react-redux"
 import * as actions from "../actions/"
 
 const mapStateToProps(state){
   return { some_key: state.some_value }
 }
 
 connect(mapStateToProps, actions)(myComp)

References​