State object structure in react-redux application

Question

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
   }
}

Ajeet Shah · Accepted Answer · 2020-07-12 17:31:23Z

1

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
   }
}

answered Jul 12, 2020 at 17:31

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

State object structure in react-redux application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related