Как в React + Redux обмениваться данными между компонентами?

Question

[teub74]

Допустим есть компонент User который принимает данные и обрабатывает их.
Эти данные приходят асинхронно в компонент Settings.

export default class Root extends Component {
    render() {
        return (
            <Provider store={store}>
                    <User /> // передать данные сюда
                    <Settings /> //от сюда
            </Provider>
        )
      }
  }
 

ReactDOM.render( <Root />, document.getElementById( 'root' ) );

Как это можно сделать? Или как принято делать в подобных проблемах?

Answer 1

[Антон Спирин]

По-хорошему, надо код запроса писать вне компонента, а в компонент передавать action инициирующий запрос. Хорошим вариантом будет использовать для этого redux-saga. В Settings вы должны только запрашивать данные и как только они приходят получать их где хотите из store.

Примерный код:
Редьюсер и action creators:

const FETCH_USER_DATA_REQUEST = 'FETCH_USER_DATA_REQUEST';
const FETCH_USER_DATA_SUCCESS = 'FETCH_USER_DATA_SUCCESS';
const FETCH_USER_DATA_FAIL = 'FETCH_USER_DATA_FAIL';

export const fetchUserData = () => ({
  type: FETCH_USER_DATA_REQUEST,
});

export const fetchUserDataSuccess = data => ({
  type: FETCH_USER_DATA_SUCCESS,
  payload: data,
});

export const fetchUserDataFail = () => ({
  type: FETCH_USER_DATA_FAIL,
});

const initialState = {
  data: {},
  isLoading: true,
  isError: false,
};

export default (state = initialState, action) => {
  const { type, payload } = action;

  switch (action) {
    case FETCH_USER_DATA_REQUEST:
      return {
        ...state,
        isLoading: true,
      };
   
    case FETCH_USER_DATA_SUCCESS:
      return {
        ...payload,
        isLoading: false,
        isError: false,
      };

   case FETCH_USER_DATA_FAIL:
     return {
       ...state,
       isLoading: false,
       isError: true,
     };
   
   default: 
      return state;
  }
};

Сага. По вызову функции fetchUserData, тут произойдет вызов api, в случае успеха в store придут данные, в случае ошибки isError примет значение true:

import { call, put, takeLatest } from 'redux-saga/effects';
import {
  FETCH_USER_DATA_REQUEST,
  fetchUserDataSuccess,
  fetchUserDataFail,
} from '../ducks/userDucks';
import { fetchUserData } from '../api';

export function* fetchUserDataSaga() {
  try {
    const { data } = yield call(fetchUserData);

    yield put(fetchUserDataSuccess(data));
  } catch (error) {
    yield put(fetchUserDataFail());
  }
}

export default function* watchFetchUserDataSaga() {
  yield takeLatest(FETCH_USER_DATA, fetchUserDataSaga);
}

Для выборки из store лучше использовать selector:

export const userDataSelector = state => state.userData;

Тут провайдим данные пользователя в User:

import User from './User';
import { userDataSelector } from '../selectors';

const mapStateToProps = state => ({
  userData: userDataSelector(state),
});

export default connect(mapStateToProps)(User);

Тут провайдим данные пользователя и fetchUserData в Settings:

import Settings from './Settings';
import { userDataSelector } from '../selectors';
import { fetchUser } from '../ducks/userDucks';

const mapStateToProps = state => ({
  userData: userDataSelector(state),
});

const mapDispatchToProps = {
  fetchUserData,
};

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

Answer 2

[Максим]

Как в React + Redux обмениваться данными между компонентами?

Обмен данными происходит через один общий объект состояния store.
Вам нужно "приконнектить" оба компонента с помощью:

connect(mapStateToProps, mapDispatchToProps)(ComponentName)

и тогда они у вас будут слушать изменения в сторе (за счет, того, что вы передадите в функции mapStateToProps), а так же смогут уметь передавать изменения в стор (с помощью dispatch функции, которую вы будете вызывать внутри mapDispatchToProps).

К сожалению, объяснение очень сухое и может быть не понятным, но и ваш вопрос выглядит как: ребята, объясните мне (желательно кодом) как работает redux. Лучше пройти какоий-нибудь туториал внимательно и такой вопрос сам по себе отпадет.

Если немного упростить, то вам нужно будет:
из компонента Settings вызвать action creator (через dispatch)
в компоненте User это дело поймать (поймаете с помощью редьюсера, на который будет "натравлена" функция mapStateToProps)

Comments

[teub74]

Как поймать??? Ведь у state, нет subscribe, как повесить обработчик при изменение store?

//User.js
export default connect(
    state => ({
        testStore: state
    }),
    dispatch => ( {
        onLoadData: ( data ) => {
            dispatch( { type: 'GET_USER_DATA', data: data } );
        }
    } )
)( User );


//Settings.js
class Settings extends Component {
    componentDidMount() {
          console.log( this.props.testStore ) // {}
         setTimeout(() => {
          console.log( this.props.testStore ) // {...data}
         }, 2000)
    }
}

Answer 3

[Роман Александрович]

Ну считаю что правильно будет если вы подключите редукс, положите данные в Store из settings а затед возьмете эти данные в компоненте User.
Но можно написать функцию которая будет отправлять данные в родительский state а потом из родительского стейта в другой компонент. Но первый вариант правильнее.

Comments

[teub74]

так уже подключил redux, но я не знаю как присоединится subscribe в компоненте User?
То есть данные уже есть в this.props.store, но если их просто вызвать сразу будет пустой объект, а если например через таймаут в 2000мс, то всё нормально, что в этом случае что делать?

//User.js
export default connect(
    state => ({
        testStore: state
    }),
    dispatch => ( {
        onLoadData: ( data ) => {
            dispatch( { type: 'GET_USER_DATA', data: data } );
        }
    } )
)( User );

//Settings.js
class AutoCompleteExampleSimple extends Component {
    componentDidMount() {
          console.log( this.props.testStore ) // {}
         setTimeout(() => {
          console.log( this.props.testStore ) // {...data}
         }, 2000)
    }
}

[Maxim Nepritimov]

M L, тут наверное надо весь код увидеть. Ну или хотя бы ту часть, которая связана с этим функционалом.

[teub74]

Maxim Nepritimov,

//index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers';


/**
 * Components
 */
import Settings from './components/settings/Settings';
import User from './components/user/User';

const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );

export default class Root extends Component {
    render() {
        return (
            <Provider store={store}>
                        <User />
                        <Settings />
            </Provider>
        )
      }
  }
 

ReactDOM.render( <Root />, document.getElementById( 'root' ) );

[Maxim Nepritimov]

teub74, у вас ошибка в рендере <Provider>...</MuiThemeProvider>

[Maxim Nepritimov]

teub74, верно ли у вас создается стор?

[Maxim Nepritimov]

teub74, неизвестный компонент в

ReactDOM.render( <Root />, document.getElementById( 'root' ) );

Должен быть Арр же

[teub74]

Maxim Nepritimov, там всё верно я не целиком код перенесю

[teub74]

Maxim Nepritimov, всё, поправил, просто кода много, и не разумно всё брать сюда