Redux: проблема с магазином для обмена данными - PullRequest
Новая
       5

Redux: проблема с магазином для обмена данными

0 голосов
/ 01 февраля 2019

Я хочу протестировать Redux на моем приложении-адаптере.Я перемещаюсь по нескольким Компонентам - я хочу, чтобы компонент TestRedux обновил значение, и чтобы другой компонент TestRedux2 увидел это значение с помощью Redux.

Я следовал нескольким учебникам по Redux и сделал следующее:

Действия: 

//myApp/redux/Actions/action.js
import { ADD_RES } from "../Constants/action-types";

export function addResa(payload) {
  return { type: ADD_RES, payload: payload };
}

Константы: 

//myApp/redux/Components/action-types.js
export const ADD_RES = "ADD_RES";
export const DEL_RES = "DEL_RES";

Редукторы: 

//myApp/redux/Reducers/resaReducer.js
import { ADD_RES } from "../Constants/action-types";

const initialState = {
  res: []
};

function resaReducer(state = initialState, action) {
  let nextState;
  switch (action.type) {
    case ADD_RES:
      nextState = {
        ...state,
        payload: action.payload
      }
      return nextState;
    default:
      return state
  }
}
export default resaReducer;

Магазин: 

//myApp/redux/Store/store.js
import { createStore } from "redux";
import resaReducer from "../Reducers/resaReducer";
const Store = createStore(resaReducer);
export default Store;

TestRedux: 

//myApp/redux/Components/TestRedux.js
// I use react-navigation to navigate between components. The component App is the first component and then trigger to testRedux
import React from 'react';
import { View, Text, Alert } from 'react-native';
import { ADD_RES } from "../Constants/action-types";
import {addResa} from "../Actions/actions";
import { connect } from 'react-redux'
import { Provider } from 'react-redux'
import Store from '../Store/store'
import App from '../../App';

const mapStateToProps = (state) => {
    return state.date
}

export class TestRedux extends React.Component {
  render() {
    this.props.dispatch(addResa(2));

    return (
      <View>
         <Button
              onPress={() => {this.props.navigation.navigate('TestRedux2')}}
              title='test'
          />
          <Provider store={Store}>
            <App/>
          </Provider>
     </View>
    )
  }
}
export default connect(mapStateToProps)(TestRedux)

TestRedux2: 

//myApp/redux/Components/TestRedux2.js
import { connect } from 'react-redux'
import React from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { ADD_RES } from "../Constants/action-types";
import {addResa} from "../Actions/actions";
import Store from '../Store/store'

const mapStateToProps = (state) => {
    return state.date
}

export class TestRedux2 extends React.Component {
            render() {
                        console.log("Value from TestRedux2 is", Store.getState())
                        return (
                                    <View>
                                               <Text> Hello </Text>
                                    </View>
                        )
            }
}
export default connect(mapStateToProps)(TestRedux2)

Правильно ли я использую Redux?

У меня следующая ошибка: «Нарушение инварианта: не удалось найти« store »в контексте« Connect (TestRedux) »».Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему получателю контекста React в Connect (TestRedux) в параметрах соединения. ”

1 Ответ

0 голосов
/ 02 февраля 2019

Этот код: 

  <Provider store={Store}>
    <App/>
  </Provider>

, который находится внутри вашего TestRedux, должен находиться внутри вашего файла index.js следующим образом: 

render(
  <Provider store={Store}>
    <App/>
  </Provider>,
  document.getElementById('root')
)

импортировать, конечно, из вашего магазина.Это при условии, что вы не внесли никаких других изменений в свой исходный файл index.js.

...