feature/redux

[pashute]

• [ ] Following states: -- stored: lastPlace, lastBeacon, language -- app wide: place, beacon -- settings: autoupdate(bool), voicetype(text), theme(text), largefonts(bool), scale(number), notifications(bool), autolaunch(bool).

• [ ] Fix navigation (go back) onPress of DONE button in profiles and in SetHome.

[ghost]

1.- Write a type in types.js to use in action and reducer to set the current compass: export const SET_CURRENT_COMPASS = 'SET_CURRENT_COMPASS';

[pashute]

Redux explained by Omar (from hangouts discussion)

We have a new folder called redux, in that redux we have

• a file called types,
• a folder called reducers
• and a folder called actions

the reducers are the ones that have the data stored,
and the data is saved using a action

we use connect from react-redux in every script we want to use the actions or the reducers
connect connects the component with

• mapStateToProps - those are the reducers and their data,
• and mapDispatchToProps - those are the actions

[ghost]

2.- Write a Action in DataActions.js to set the current compass: (remember to use types)

export const setCurrentCompass = compass => { console.log(compass); return { type: types.SET_CURRENT_COMPASS, compass: compass }; };

[ghost]

3.- Add in DataReducer in the INITIAL_STATE the new data to set: "currentCompass: {}"

[ghost]

4.- Add in DataReducer the logic when the action of types.SET_CURRENT_COMPASS is called: case types.SET_CURRENT_COMPASS: { return { ...state, currentCompass: action.compass }; }

[ghost]

5.- In MainPage (where we use compass) we export from the folder of redux/actions the new action: setCurrentCompass, and added in mapDispatchToProps: setCurrentCompass: compass => { dispatch(setCurrentCompass(compass)); }

[ghost]

6.- In MainPage in the line 81 (or in the function componentDidMount) where we use compass, instead of use: this.setState({ heading: degree, pointingTo });, we use this.props. setCurrentCompass({ heading: degree, pointingTo })

[ghost]

7.- In the scripts that we want to used we use mapStateToProps

[pashute]

See also: storybook meets redux https://medium.com/ingenious/storybook-meets-redux-6ab09a5be346

[pashute]

In AppMain we do as follows:

first we get ... getLanguage which is defined in ./data/index.html then we can use the placesData, appData and and stylesData.

We then set const { placesData } = savedLanguage;
places = placesData.places;

and then we set the state of the page of redux with the dispatcher: setCurrentPlace and other similar. But it's done via the PROPS!! ?? Why?? example: ...this.props.setCurrentPlace(finalPlace); Why?

Why not the page's state? who is passing it any prop? who sends it a prop: currentPlaceData. or was it just to finish the job quickly and I can change it slowly to use the page's state instead?

[pashute]

test

closing for issue clutter. Will look into it when testing.