CODEWITHSUNDEEP
react-nativereduxreact-redux
Freddlow
Freddlow

Reputation: 167

Redux : problem with the store to exchange data

I want to test Redux on my react-native app. I navigate through several Components - I want a component TestRedux updates a value and that another component TestRedux2 see this value using Redux.

I followed several tutorials on Redux and did this:

Actions:

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

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

Constants:

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

Reducers:

//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;

Store:

//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)

Do I use correctly Redux ?

I have the following error: “Invariant Violation: Could not find "store" in the context of "Connect(TestRedux)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(TestRedux) in connect options.”

Upvotes: 1

Views: 137

Answers (1)

KT-mongo
KT-mongo

Reputation: 2212

This code:

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

which is inside your TestRedux, should be inside your index.js file as follows:

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

import of course your store. That is assuming you haven't made any other changes in your initial index.js file.

Upvotes: 1

Related Questions