CODEWITHSUNDEEP
reactjsreduxreact-redux
milushov
milushov

Reputation: 721

How to proper manage redux state?

I'm looking for the best practice approach for manage redux state in particular case:

I have an application for editing posts with content editor, application state looks like this:

{
  posts: [
    {
      id: 123,
      blocks: [
        {
          setting1: 'fuzz',
          setting2: 'bar',
          ...
        }
      ],
      ...
    },
    ...
  ],

  activeBlock: {
    setting1: 'fuzz',
    setting2: 'bar',
    ...
  }
}

It's actually a state structure to which I want to come.

At this time I have the following structure:

{
  posts: [
    {
      id: 123,
      activeBlockIndex: 0,
      blocks: [
        {
          setting1: 'fuzz',
          setting2: 'bar',
          ...
        }
      ],
      ...
    },
    ...
  ]
}

And I have one common reducer for posts and content blocks. And It's important to mention that Content Editor component very complex and has so many goes deep down child components. It's seems to be ok and it works.. But I have a problem: I have to specify so much information about posts, in the Content Editor's components e.g.: postId, blockIndex. I think it's not so good, because main responsibility of the Content Editor component it's just -- editing the content, no matter where it's stored.

I want to refactor my app so Content Editor's components will contain reference only for the state.activeBlock and other components for managing posts and blocks only for state.posts. (first variant of the structure in the question)

In other words I'm looking for a way for sync state.activeBlock branch of state to state.posts at the reducers level (or somewhere else, I don't know).

I really appreciate any advices.

Btw, is it clear what I'm talking about? Or question should be rewritten in more detailed way?

Upvotes: 0

Views: 161

Answers (1)

inostia
inostia

Reputation: 8023

I'm not sure if I'm understanding exactly what you're asking, but if you want multiple "areas" of state per your example, you can use combineReducers. Eg store.js

import thunkMiddleware from 'redux-thunk'
import { createStore, combineReducers, applyMiddleware } from 'redux'

import postsReducer from './reducers/postsReducer'
import activeBlockReducer from './reducers/activeBlockReducer'

const reducers = {
    posts: postsReducer,
    activeBlock: activeBlockReducer
}

const reducer = combineReducers(reducers)
const store = createStore(
    reducer,
    applyMiddleware(
        thunkMiddleware
    )
)

export default store

In mapStateToProps you can use state.posts[0] and state.activeBlock.setting1 to connect to your components.

Upvotes: 1

Related Questions