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
Constants
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 }; }
Reducers
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";
Store
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;
TestRedux:
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;
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
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)
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
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)
Est ce que vous pouvez me dire si j’utilise Redux correctement ?
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') )
J’ai l’erreur suivante : can't find variable document
Merci !
Partager