Redux передать / обновить состояние с текущей страницы

Question

У меня есть приложение реагирования ( репо ), которое я хочу использовать при помощи избыточности для универсального хранения состояния, чтобы корневое приложение могло получить к нему доступ.

Например: одна страница имеетGET API вызов, который заполняет страницу.Это прекрасно работает и все, но я запутался в том, как сделать пару вещей.

1. Как я могу использовать переменные в действии приведения, чтобы дать действию, скажем, идентификатор модели ипусть он возвращает модель (API возвращает json).
2. Как я могу затем передать это состояние так, чтобы компонент более высокого порядка (например, базовый App.js) мог получить доступ к состоянию, чтобы я мог использоватьпеременные с текущей страницы в навигации.
3. Что / когда является наилучшим способом / временем для обновления состояния избыточности, чтобы изменения отражались в любом месте с использованием состояния избыточности?

В частности (в этом проекте): если вы находитесь на localhost/spells/X с X в качестве идентификатора модели, как я могу передать состояние от компонента контейнера этой страницы (в данном случае LayoutSpellView) до MaterialUIApp

index.js
  |--App.js
     |--MaterialUiApp
        |--Router
           |--LayoutSpellView (pass state up to MaterialUiApp)

Answer 1

Чтобы помочь вам увидеть поток данных, вот набросок того, как все связано друг с другом.В приведенном ниже примере кода это поток данных:

1. При нажатии кнопки «Загрузить комментарии» отправляется блок с параметром userId.(A thunk является асинхронным действием.)

2. Группа использует userId для выполнения своего асинхронного вызова, а then отправляет действие setComments(comments)с полученными комментариями в качестве полезной нагрузки.

3. Редуктор комментариев фиксирует это действие и обновляет состояние Redux с помощью массива comments.

4. Контейнер для обновлений comments в mapStateToProps

5. Компонент получает обновленные comments и отображает их в <ul>

    // actions.js
    export const SET_COMMENTS = "MyApp/setComments";
    export const setComments = comments => ({
      type: SET_COMMENTS,
      payload: comments
    });

    // thunks.js
    import { setComments } from './actions';
    export const getCommentsAsync = id => dispatch => {
      return axios
        .get(`http://localhost:5000/comments/${id}`)
        .then(comments => dispatch(setComments(comments)));
    };

    // reducer.js
    import { SET_COMMENTS } from './actions';
    const initialState = {
      comments: []
    };

    export const reducer = (state = initialState, action) => {
      switch (action.type) {
        case SET_COMMENTS:
          const comments = action.payload;
          return {
            ...state,
            comments
          };
        default:
          return state;
      }
    };

    // components.js
    export default function CommentsList({ comments, loadComments, userId }) {
      return (
        <div>
          <ul>
            {comments.map(comment => <li key={comment.id}>{comment.body}</li>)}
          </ul>
          <button onClick={() => loadComments(userId)}>Load Comments</button>
        </div>
      );
    }

    // containers.js
    import { connect } from "react-redux";
    import { getCommentsAsync } from "./thunks";
    import CommentsList from "./components";

    mapStateToProps = state => ({
      comments: state.comments,
      userId: state.user.id
    });

    mapDispatchToProps = {
      loadComments: getCommentsAsync
    };

    export default connect(mapStateToProps, mapDispatchToProps)(CommentsList);

Answer 2

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

1. Вы можете использовать полезную нагрузку или любое другое имя, переменное с вашим создателем действия.В вашем редукторе вы можете получить их с помощью action.payload, action.id и т. Д.

2. Как я объяснил в первом абзаце, вы обновляете свое состояние в любое время.После этого вы подключаете любой компонент к вашему состоянию в любом месте.

3. Нет лучшего времени или лучшего способа сделать это.Это зависит от вашего кода и логики приложения.

Конечно, есть некоторые лучшие практики, но мы не можем говорить о них так широко.После того, как вы познакомитесь с Redux, вы увидите некоторые из них.Например, я сказал: «Мы не передаем состояние Redux».Это правда, но иногда, чтобы избежать столь большого количества connect вокруг компонентов, мы используем контейнерные приложения, подключаем это приложение к хранилищу (вы фактически достигли состояния через хранилище), а затем передаете связанные части состояния связанным компонентам.

Я рекомендую собственную документацию Redux в качестве отправной точки: https://redux.js.org/