How to organize Redux state for reusable components?

Question

TL DR: In the case of a reusable component that has complex logic for managing its own state (think: facebook autofill text area for comments, emoji, etc.), how to use storage, actions and reducers to control the state of several instances of this component, distributed throughout the website?

Consider a real example from the official repository repository. In it we have:

• a RepoPage , which displays a list of users who shot a particular repo,
• a UserPage that displays a list of repositories that are tagged by a specific user
• a List that is general enough to display a list of users or a repository, subject to the itemsmethod renderItem. In particular, it RepoPageuses a component Userto display each of the users who prevented the repo, and UserPageuses a component Repoto display each of the selected repositories.

Suppose I really want all states to be in Redux.

In particular, I want the state of each list on each RepoPage and UserPage to be controlled using Redux. In this example, this is already taken into account by a smart three-level deep tree:

• at the top level, the key says what the component data is (in the example it is called store.pagination)
• that is, a branch for each specific type of context in which the component can be ( store.pagination.starredByUser, store.pagination. stargazersByRepo)
• then there are as many keys as there are unique contexts ( store.pagination.starredByUser[login], store.pagination. stargazersByRepo[repo])

I feel that these three levels also correspond: component type, parent type, parent identifier.

But I do not know how to extend this idea to handle the case in which the List component itself had many children, with state tracking in Redux.

In particular, I want to know how to implement a solution in which:

• Component
• User remains intact
• Repo The component has a button that switches the background color.
• the state of each component is Repocontrolled using Redux

( Redux, - , " React" )

:

• , Elm Actions (messages) - , , " " , , ( ).
• Redux , , , prism ( redux-elm): action.type , . OTOH tomkis , , Redux , -
• , , ,
• , redux-fly , , , , action.type - store, -
• WinAPI, Redux, , hWnd , , action , , store.
• , , -, / : , .
• , , , , , ( , , , - , Elm ).
• , , .
• , nav, , - : , "" , "", , . , , "private". , WinAPI:)
• elm-inspiration sompylasar - , "matrioshka", , , , Elm
• redux-subspace , , Elm .

Answer 1

, ​​Elm lang Typescript:

,

interface ComponentState {
   text: string
}

2 .

interface SetAction {
    type: 'SET_VALUE', payload: string
}

interface ResetAction {
    type: 'RESET_VALUE'
}

2 ( Typescript):

type ComponentAction = SetAction | ResetAction;

:

function componentReducer(state: ComponentState, action: ComponentAction): ComponentState {
    // code
}

, "" , :

interface ParentComponentState {
    instance1: ComponentState,
    instance2: ComponentState,
}

, Component, . , :

interface Instance1ParentAction {
    type: 'INSTNACE_1_PARENT',
    payload: ComponentAction,
}

interface Instance2ParentAction {
    type: 'INSTNACE_2_PARENT',
    payload: ComponentAction,
}

:

type ParentComponentAction = Instance1ParentAction | Instance2ParentAction;

- :

function parentComponentReducer(state: ParentComponentState, action: ParentComponentAction): ParentComponentState {
    switch (action.type) {
        case 'INSTNACE_1_PARENT':
            return {
                ...state,
                // using component reducer
                instance1: componentReducer(state.instance1, action.payload),
            };
        //
    }
}

.