CODEWITHSUNDEEP
reactjsreduxreact-redux
André Carvalho
André Carvalho

Reputation: 35

State object structure in react-redux application

I'm creating a simple blog using React and Redux, most for learning these two libraries. Everything is working fine, my only question is about the way the state object is structured in the application. When I go to the Redux Toolkit, I see this:

Redux Toolkit screenshot

In the state I have a post object with another post object inside it. My question is: where did I defined the state in that way (with a post object inside a post object)? Below are the content of this application:

MainPost.js

import React, { useEffect } from 'react'
import { connect, useDispatch } from 'react-redux'
import { getPostListAction } from '../store/actions/getPostListAction'

export const MainPost = () => {
   const dispatch = useDispatch()
   useEffect(() => {
      dispatch(getPostListAction())
   })

   return (
      <div>App</div>
   )
}

const mapStateToProps = state => {
   return {
      post: state.post
   }
}

export default connect(mapStateToProps)(MainPost)

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './reducers/rootReducer'
import { devToolsEnhancer } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import { api } from './middleware/api'

const store = createStore(
   rootReducer,
   compose(
      devToolsEnhancer(),
      applyMiddleware(thunk),
   )
)

export default store

postListReducer.js

const initialState = {
   post: ''
}

export default function getPostListReducer(state = initialState, action) {
   if(action.type === 'getPostList') {
      return {
         ...state,
         post: action.payload
      }
   } else {
      return state
   }
}

Upvotes: 1

Views: 63

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19823

The first post (after state) is namespace of postListReducer

Here is how you use combineReducer to create a rootReducer:

const rootReducer = combineReducers({
  post: postListReducer, 
  other: otherReducer
})

And to select data from the store, you do:

const mapStateToProps = state => {
   return {
      post: state.post.post // the first "post" (after "state") is namespace of postListReducer
   }
}

Or if you don't want to write state.post.post, you can change your postListReducer to directly hold the "post" data:

const initialPost = ''

export default function getPostListReducer(state = initialPost, action) {
   if(action.type === 'getPostList') {
      return action.payload
   } else {
      return state
   }
}

Upvotes: 1

Related Questions