Motivation
Having an App component having this child:
<Counterss name={name1} liftUp={catch1}/>
and the Counterss component having these children:
<Counters liftUp={catch1} name={name+'-'+name1}/>
<Counters liftUp={catch2} name={name+'-'+name2}/>
and the Counters component having these children:
<Counter liftUp={catch1}
name={name+'-'+name1}/>
<Counter liftUp={catch2}
name={name+'-'+name2}/>
I want this:
that's it, I want full control of my state. I want each component to have a local state defined through the use of useReducer and I want a store object where I can access all these local states of all the components, starting from the App component to the innermost component, from anywhere in the app, in any component, from the outermost to the innermost.
I want to use useContext to get access to this store object in order to be able to use dispatch and state of any local state of the components of the app anywhere and I want it to be reactive.
For that purpose I need named components, that's it, I must pass a property named name to each component when I use it in the app.
Also, I need what is found in the article lifting up information in React from one component to its parents in the component tree because the strategy I will follow will be to lift up all info, that's it state and dispatch of every local state, and then make it accessible to all the components through a store object defined in the App component with the use of useContext.
The HOC
The HOC I will be using it's a variant of the one defined in the post mentioned above. Because one component can have more than one child, I am interested in catching up all the info of all of the children, so I define the HOC like this:
import React,{useState,useRef} from 'react'
export default C=>(props)=>{
const [foo,setFoo]=useState(0)
const info1=useRef(null)
const catch1=(info)=>{
info1.current=info
setFoo(prev=>prev+1)
}
const info2=useRef(null)
const catch2=(info)=>{
info2.current=info
setFoo(prev=>prev+1)
}
const info3=useRef(null)
const catch3=(info)=>{
info3.current=info
setFoo(prev=>prev+1)
}
const info4=useRef(null)
const catch4=(info)=>{
info4.current=info
setFoo(prev=>prev+1)
}
const info5=useRef(null)
const catch5=(info)=>{
info5.current=info
setFoo(prev=>prev+1)
}
const info6=useRef(null)
const catch6=(info)=>{
info6.current=info
setFoo(prev=>prev+1)
}
const info7=useRef(null)
const catch7=(info)=>{
info7.current=info
setFoo(prev=>prev+1)
}
const info8=useRef(null)
const catch8=(info)=>{
info8.current=info
setFoo(prev=>prev+1)
}
const info9=useRef(null)
const catch9=(info)=>{
info9.current=info
setFoo(prev=>prev+1)
}
const info10=useRef(null)
const catch10=(info)=>{
info10.current=info
setFoo(prev=>prev+1)
}
return (
<C
catch1={catch1}
catch2={catch2}
catch3={catch3}
catch4={catch4}
catch5={catch5}
catch6={catch6}
catch7={catch7}
catch8={catch8}
catch9={catch9}
catch10={catch10}
info1={info1}
info2={info2}
info3={info3}
info4={info4}
info5={info5}
info6={info6}
info7={info7}
info8={info8}
info9={info9}
info10={info10}
{...props}/>
)
}
With the use of this HOC I can have up to ten children in each component. If there is a component that has more than ten then I would need to modify the HOC in order to put the capacity for catching info from more children.
The innermost component
Let's take a look to the definition of the innermost component:
import React,{useEffect,useReducer,useContext} from 'react'
import {reducer,initialState} from './reducer'
import {StoreContext} from '../App'
const Counter=({liftUp,name})=>{
const names=name.split('-')
const store=useContext(StoreContext)
const [state,dispatch]=useReducer(reducer,initialState)
useEffect(()=>{
liftUp.bind(null,{state,dispatch})()
},[state])
return (
<div>
{store[names[0]]&&store[names[0]][names[1]]&&
store[names[0]][names[1]][names[2]].state.counter}
</div>
)
}
export default Counter
As you can see it's a counter component because it defines a state and a dispatch function which are as follows:
import {INCREMENT,DECREMENT} from './actions'
export const initialState={
counter:0
}
const increment=(state,action)=>{
return {
...state,
counter:state.counter+1
}
}
const decrement=(state,action)=>{
return {
...state,
counter:state.counter-1
}
}
export const reducer=(state,action)=>{
switch(action.type){
case INCREMENT:
return increment(state,action)
case DECREMENT:
return decrement(state,action)
default:
return state
}
}
So you see how we have an initial state with counter set to zero, and then operations to increment and decrement that counter.
The Counter component receives a liftUp property. This is used to lift up info to the parent component of Counter. We do that in a useEffect hook, binding to the liftUp function an object with the info we want to attach, and calling it.
useEffect(()=>{
liftUp.bind(null,{state,dispatch})()
},[state])
The Counters component
Now let's take a look at the definition of the Counters component, the parent of the Counter component, or at least one that have Counter components as a child.
import React,{useReducer,useState,useRef,useEffect,useContext} from 'react'
import Counter from '../Counter'
import * as styles from './index.module.css'
import * as counterActions from '../Counter/actions'
import {reducer,initialState} from './reducer'
import {StoreContext} from '../App'
import withLiftUp from '../../hocs/withLiftUp'
const Counters=({liftUp,name,catch1,catch2,info1,info2})=>{
const names=name.split('-')
const store=useContext(StoreContext)
const [state,dispatch]=useReducer(reducer,initialState)
const increment1=()=>{
console.log(store)
store[names[0]][names[1]][name1].dispatch(counterActions.increment())
}
const decrement1=()=>{
store[names[0]][names[1]][name1].dispatch(counterActions.decrement())
}
const increment2=()=>{
store[names[0]][names[1]][name2].dispatch(counterActions.increment())
}
const decrement2=()=>{
store[names[0]][names[1]][name2].dispatch(counterActions.decrement())
}
const name1='counter1'
const name2='counter2'
useEffect(()=>{
liftUp.bind(null,{
state,dispatch,[name1]:info1.current,[name2]:info2.current
})()
},[state,info1.current,info2.current])
return (
<div>
<Counter liftUp={catch1}
name={name+'-'+name1}/>
<Counter liftUp={catch2}
name={name+'-'+name2}/>
<div>
<button onClick={increment1}>increment</button><br/>
<button onClick={decrement1}>decrement</button><br/>
{store[names[0]]&&store[names[0]][names[1]]&&
store[names[0]][names[1]][name1]&&store[names[0]][names[1]][name1].state.counter}
</div>
<div>
<button onClick={increment2}>increment</button><br/>
<button onClick={decrement2}>decrement</button><br/>
{store[names[0]]&&store[names[0]][names[1]]&&
store[names[0]][names[1]][name2]&&store[names[0]][names[1]][name2].state.counter}
</div>
</div>
)
}
export default withLiftUp(Counters)
The first thing we notice are the catch1, catch2, info1, and info2 properties we receive:
const Counters=({liftUp,name,catch1,catch2,info1,info2})=>{
That's because we make use of the withLiftUp HOC defined earlier and because we have to children in this component from where we want to get info, that's it:
<Counter liftUp={catch1}
name={name+'-'+name1}/>
<Counter liftUp={catch2}
name={name+'-'+name2}/>
You see how we pass to the children a property named liftUp with the catch1 and catch2 functions the HOC gives to us.
We then have this:
const name1='counter1'
const name2='counter2'
useEffect(()=>{
liftUp.bind(null,{
state,dispatch,[name1]:info1.current,[name2]:info2.current
})()
},[state,info1.current,info2.current])
We are passing up the info from the childs. The info from the children will be contained in info1.current and info2.current because info1 and info2 are refs. Take a look at the post mentioned earlier if this is not clear to you.
Don't pay attention now at the names. We are going up through the tree. Later we will go down and will take into account the names.
The Counterss component
This component has as children instances of the Counters component:
import React,{useReducer,useContext,useEffect} from 'react'
import Counters from '../Counters'
import {reducer,initialState} from './reducer'
import withLiftUp from '../../hocs/withLiftUp'
import {StoreContext} from '../App'
const Counterss=({catch1,catch2,info1,info2,name,liftUp})=>{
const names=name.split('-')
const store=useContext(StoreContext)
const [state,dispatch]=useReducer(reducer,initialState)
const name1='counters1'
const name2='counters2'
useEffect(()=>{
liftUp.bind(null,{state,dispatch,
[name1]:info1.current,[name2]:info2.current})()
},[state,dispatch,info1.current,info2.current])
return (
<div>
<Counters liftUp={catch1} name={name+'-'+name1}/>
<Counters liftUp={catch2} name={name+'-'+name2}/>
{store[names[0]]&&
store[names[0]][name1]&&store[names[0]][name1].counter1.state.counter}
{store[names[0]]&&
store[names[0]][name1]&&store[names[0]][name1].counter2.state.counter}
{store[names[0]]&&
store[names[0]][name2]&&store[names[0]][name2].counter1.state.counter}
{store[names[0]]&&
store[names[0]][name2]&&store[names[0]][name2].counter2.state.counter}
</div>
)
}
export default withLiftUp(Counterss)
You notice how we receive those props:
const Counterss=({catch1,catch2,info1,info2,name,liftUp})=>{
that's because we have two children:
<Counters liftUp={catch1} name={name+'-'+name1}/>
<Counters liftUp={catch2} name={name+'-'+name2}/>
Pay attention also at the naming, we receive a name prop and we define a name prop in each children, where name1 and name2 are defined in the component:
const name1='counters1'
const name2='counters2'
We as always pass info up with the use of useEffect hook and liftUp function received as a prop:
useEffect(()=>{
liftUp.bind(null,{state,dispatch,
[name1]:info1.current,[name2]:info2.current})()
},[state,dispatch,info1.current,info2.current])
The App component
Finally, we get at the top level component, the App component. Here is how it is defined:
import React,{createContext,useState,useEffect,useReducer} from 'react'
import * as classes from './index.module.css'
import Counterss from '../Counterss'
import withLiftUp from '../../hocs/withLiftUp'
import {reducer,initialState} from './reducer'
export const StoreContext=createContext()
const App=({catch1,info1})=>{
const [store,setStore]=useState({})
const [state,dispatch]=useReducer(reducer,initialState)
useEffect(()=>{
setStore({state,dispatch,[name1]:info1.current})
},[state,dispatch,info1.current])
const name1='counterss1'
return (
<StoreContext.Provider value={store}>
<div className={classes.general}>
<Counterss name={name1} liftUp={catch1}/>
</div>
</StoreContext.Provider>
)
}
export default withLiftUp(App)
First of all we create a context with createContext from react:
export const StoreContext=createContext()
We also create a store object and a setStore function with the useState hook:
const [store,setStore]=useState({})
and we set it like this in the useEffect hook:
useEffect(()=>{
setStore({state,dispatch,[name1]:info1.current})
},[state,dispatch,info1.current])
info1 is received as a prop from the use of the HOC:
const App=({catch1,info1})=>{
We also receive catch1 which is used in here:
<Counterss name={name1} liftUp={catch1}/>
and name1 is defined as follows:
const name1='counterss1'
Conclusion
So that's it, this is how to fully take control of state management in React (without Redux).
That's the app running:
Try it yourself with a less complex or cumbersome app.
Top comments (0)