Simplified react context store management leveraging the power of pathing objects.
npm install redux-path-storeredux/rootStore.ts
``typescript
interface RootState {
farms: {name: string}[]
farmer: {
name: string
details: {
age: number
}
}
}
const initialState = {
farms: [{name: 'Red Farm'}],
farmer: {name: 'Bobby Red', details: {age: 50}}
}
const {store, pathMap} = createStoreFromState
// Normal redux store, packaged with auto generated actions/reducers based upon initialState.
export const rootStore = store
// A pathProp pathing map of your Store to be consumed by your "useReduxState" hook.
export const Root = pathMap
console.log(Root.farms) // "farms"
console.log(Root.farmer) // "farmer"
console.log(Root.farmer.details.age) // "farmer.details.age"
console.log(Root.doggy) // undefined, typescript error will occur.
`
components/Farms.tsx
`typescript
import {Root} from './redux/rootStore'
import {useReduxState} from 'redux-path-store'
const Farms: React.FC = () => {
// Local State
const [animals, setAnimals] = useState([])
// Redux State
const [farmerAge, setFarmerAge] = useReduxState(Root.farmer.details.age)
const [farms, setFarms] = useReduxState(Root.farms)
const [farmer, setFarmer] = useReduxState(Root.farmer)
useEffect(() => {
// Redux action/reducer and dispatch all taken care of.
setFarms((farms) => ({name: 'Blue Farm'})) // Action dispatched "FARMS"
setFarmerAge(25) // Action dispatched "FARMER-DETAILS-AGE"
}, [])
return (<>
{farms.map((farm) =>