Как бы вы организовали и отделили глобальное состояние с контекстом? - PullRequest
1 голос
/ 10 мая 2019

У меня есть более концептуальный вопрос

Из того, что я понимаю, все дочерние реагирующие компоненты воспроизводятся каждый раз, когда состояние изменяется в родительском компоненте. Чтобы контекст работал, он должен находиться в корневом родительском компоненте и передавать состояние всем дочерним компонентам через провайдера.

Так есть ли способ рендеринга всех ваших дочерних компонентов при обновлении состояния глобального контекста?

Я видел, как люди реализуют несколько объектов контекста, но с какой стати это важно, поскольку состояние все еще изменяется корневым родителем, поэтому все дочерние компоненты по-прежнему отображаются правильно? Поставщик контекста - это просто оболочка, но не там, где фактически обновляется состояние.

или не имеет одного корневого родительского компонента, а вместо этого является родительскими компонентами-посредниками, которые передают только необходимое глобальное состояние только определенным дочерним компонентам. Но как бы вы реально организовали это и как это работало бы с маршрутизацией?

Пожалуйста, дайте мне знать, если я ошибаюсь или что-то упустил.

Мой контекст выглядит так, и мне нужен лучший способ его инициализации

  <Context.Provider
          value={{
            //Reducer1
            stateProp1: stateReducer1.stateprop1,
            stateProp2: stateReducer1.stateprop2,
            dispatchContextTrue: () => handleDispatchTrue(),
            dispatchContextFalse: () => handleDispatchFalse(),

            //Auth Reducer
            authState: stateAuthReducer.is_authenticated,
            profileState:  stateAuthReducer.profile,
            dbProfileState: stateAuthReducer.db_profile,
            handleUserLogin: () => handleLogin(),
            handleUserLogout: () => handleLogout(),
            handleUserAddProfile: (profile) => handleAddProfile(profile),
            handleUserRemoveProfile: () => handleRemoveProfile(),
            handleAddDBProfile: (profile) => handleDBProfile(profile),
            handleRemoveDBProfile: () => handleRemoveDBProfile(),

            //Form Reducer
            useContextChangeState: stateFormReducer.user_textChange,
            useContextSubmitState: stateFormReducer.user_textSubmit,
            useContextSubmit: (event) => handleFormSubmit(event),
            useContextChange: (event) => handleFormChange(event),

            //Posts Reducer
            postsState: statePostsReducer.posts,
            commentsState:  statePostsReducer.comments,
            userPostsState: statePostsReducer.user_posts,
            searchPostsState: statePostsReducer.db_search_posts,
            handleAddPosts: (posts) => handleSetPosts(posts),
            handleRemovePosts: () => handleRemovePosts(),
            handleAddComments: (comments) => handleSetComments(comments),
            handleRemoveComments: () => handleRemoveComments(),
            handleAddUserPosts: (posts) => handleSetUserPosts(posts),
            handleRemoveUserPosts: () => handleRemoveUserPosts(),
            handleSetSearchPosts: (posts) => handleAddSearchPosts(posts),
            handleRemoveSearchPosts: () => handleRemoveSearchPosts(),

            //User Reducer
            otherUserProfileState: stateUserReducer.db_other_user_profile,
            otherUserPostsState: stateUserReducer.db_other_user_posts,
            userMessagesState: stateUserReducer.user_messages,
            handleAddOtherUserProfile: (profile) => handleSetOtherUserProfile(profile),
            handleRemoveOtherUserProfile: () => handleRemoveOtherUserProfile(),
            handleAddOtherUserPosts: (posts) => handleSetOtherUserPosts(posts),
            handleRemoveOtherUserPosts: () => handleRemoveOtherUserPosts(),
            handleAddUserMessages: (messages) => handleSetUserMessages(messages),
            handleRemoveUserMessages: () => handleRemoveUserMessages(),

            //Handle auth
            handleAuth: (props) => handleAuthentication(props),
            authObj: auth
          }}>
          <Routes />
      </Context.Provider>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...