У меня есть более концептуальный вопрос
Из того, что я понимаю, все дочерние реагирующие компоненты воспроизводятся каждый раз, когда состояние изменяется в родительском компоненте. Чтобы контекст работал, он должен находиться в корневом родительском компоненте и передавать состояние всем дочерним компонентам через провайдера.
Так есть ли способ рендеринга всех ваших дочерних компонентов при обновлении состояния глобального контекста?
Я видел, как люди реализуют несколько объектов контекста, но с какой стати это важно, поскольку состояние все еще изменяется корневым родителем, поэтому все дочерние компоненты по-прежнему отображаются правильно? Поставщик контекста - это просто оболочка, но не там, где фактически обновляется состояние.
или не имеет одного корневого родительского компонента, а вместо этого является родительскими компонентами-посредниками, которые передают только необходимое глобальное состояние только определенным дочерним компонентам. Но как бы вы реально организовали это и как это работало бы с маршрутизацией?
Пожалуйста, дайте мне знать, если я ошибаюсь или что-то упустил.
Мой контекст выглядит так, и мне нужен лучший способ его инициализации
<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>