Структура объекта состояния в приложении react-redux - PullRequest
Новая
       11

Структура объекта состояния в приложении react-redux

1 голос
/ 12 июля 2020

Я создаю простой блог, используя React и Redux, в основном для изучения этих двух библиотек. Все работает нормально, мой единственный вопрос - как структурирован объект состояния в приложении. Когда я go в Redux Toolkit, я вижу следующее:

Redux Toolkit скриншот

В состоянии у меня есть a post объект с другим post объект внутри него . Мой вопрос: где я определил состояние таким образом (с объектом сообщения внутри объекта сообщения)? Ниже приведено содержимое этого приложения:

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)

магазин. 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
   }
}

1 Ответ

1 голос
/ 12 июля 2020

Первый post (после state) - это пространство имен postListReducer

Вот как вы используете commonReducer для создания rootReducer: 

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

и для выбора данных из магазина , вы делаете: 

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

Или, если вы не хотите писать state.post.post, вы можете изменить свой postListReducer для непосредственного хранения данных "поста": 

const initialPost = ''

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