Mise en place et utilisation de Redux

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:

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:

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

Reducers

Code:

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:

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:

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:

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:

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 !