Bonjour,

Je débute en Redux et je souhaite faire un test dans mon app. J’essaie de naviguer entre différents composants, et je souhaite que le composant TestRedux mette à jour une valeur et qu’un autre composant TestRedux2 voit cette valeur.
J’ai essayé plusieurs tuto sur Redux, mais je suis un peu perdu.
J’ai fait le code suivant :

Actions
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
//myApp/redux/Actions/action.js
import { ADD_RES } from "../Constants/action-types";
 
export function addResa(payload) {
  return { type: ADD_RES, payload: payload };
}
Constants
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
//myApp/redux/Components/action-types.js
export const ADD_RES = "ADD_RES";
export const DEL_RES = "DEL_RES";
Reducers
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
//myApp/redux/Store/store.js
import { createStore } from "redux";
import resaReducer from "../Reducers/resaReducer";
const Store = createStore(resaReducer);
export default Store;
TestRedux:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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)
index.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//index.js
import { render } from "react-dom";
import React from "react";
import { Provider } from 'react-redux'
import Store from './redux/Store/store'
 
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
 
AppRegistry.registerComponent(appName, () => App);
 
render(
  <Provider store={Store}>
    <App/>
  </Provider>,
  document.getElementById('app')
)
Est ce que vous pouvez me dire si j’utilise Redux correctement ?
J’ai l’erreur suivante : can't find variable document

Merci !