self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-04-11 11:12:03 +02:00
Code Issues Releases Activity

Handle navigation state with Redux

Browse Source
This commit is contained in:
Laurent Cozic 2017-05-10 18:58:02 +00:00
parent c30c335971
commit d238e1ab6c
2 changed files with 32 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ReactNativeClient/debug-log.bat Normal file
View File

@ -0,0 +1 @@
adb logcat *:S ReactNative:V ReactNativeJS:V

131
ReactNativeClient/src/root.js
View File

@ -25,68 +25,27 @@ const reducer = (state = defaultState, action) => {
switch (action.type) { switch (action.type) {
case 'SET_BUTTON_NAME': case 'Navigation/NAVIGATE':
case 'Navigation/BACK':
var state = shallowcopy(state); const nextStateNav = AppNavigator.router.getStateForAction(action, state.nav);
state.myButtonLabel = action.name; if (!nextStateNav) return state;
return state; let newState = Object.assign({}, state);
newState.nav = nextStateNav;
case 'INC_COUNTER': return newState;
var state = shallowcopy(state);
state.counter++;
return state;
case 'VIEW_NOTE': case 'VIEW_NOTE':
// let state = Object.assign({}, state); // TODO
// state.selectedNoteId = action.id;
return state; return state;
//
// state.counter++;
// return state;
} }
return state; return state;
} }
// const appReducer = combineReducers({
// reducer: reducer,
// });
let store = createStore(reducer); let store = createStore(reducer);
class MyInput extends Component {
render() {
return <TextInput value={this.props.text} onChangeText={this.props.onChangeText} />
}
}
const mapStateToInputProps = function(state) {
return { text: state.defaultText }
}
const mapDispatchToInputProps = function(dispatch) {
return {
onChangeText(text) {
dispatch({
type: 'SET_BUTTON_NAME',
name: text
});
}
}
}
const MyConnectionInput = connect(
mapStateToInputProps,
mapDispatchToInputProps
)(MyInput)
class NotesScreen extends React.Component { class NotesScreen extends React.Component {
static navigationOptions = { static navigationOptions = {
title: 'Notes', title: 'Notes',
@ -102,7 +61,6 @@ class NotesScreen extends React.Component {
navigate('Note') navigate('Note')
} }
/> />
<MyConnectionInput/>
</View> </View>
); );
} }
@ -123,7 +81,6 @@ class NoteScreen extends React.Component {
navigate('Notes') navigate('Notes')
} }
/> />
<MyConnectionInput/>
</View> </View>
); );
} }
@ -147,69 +104,41 @@ class ProfileScreen extends React.Component {
} }
} }
const AppNavigator = StackNavigator({ const AppNavigator = StackNavigator({
Notes: {screen: NotesScreen}, Notes: {screen: NotesScreen},
Note: {screen: NoteScreen}, Note: {screen: NoteScreen},
Profile: {screen: ProfileScreen}, Profile: {screen: ProfileScreen},
}); });
class AppComponent extends React.Component {
render() {
return (
<AppNavigator navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav,
})} />
);
}
}
defaultState.nav = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Notes'));
const mapStateToProps = (state) => {
return {
nav: state.nav
};
};
const App = connect(mapStateToProps)(AppComponent);
class Root extends React.Component { class Root extends React.Component {
render() { render() {
return ( return (
<Provider store={store}> <Provider store={store}>
<AppNavigator /> <App />
</Provider> </Provider>
); );
} }
} }
// const AppNavigator = StackNavigator({
// Main: {screen: MainScreen},
// Profile: {screen: ProfileScreen},
// });
// class AppComponent extends React.Component {
// render() {
// return (
// <AppNavigator navigation={addNavigationHelpers({
// dispatch: this.props.dispatch,
// state: this.props.nav,
// })} />
// );
// }
// }
// const navInitialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Main'));
// const navReducer = (state = navInitialState, action) => {
// const nextState = AppNavigator.router.getStateForAction(action, state);
// return nextState || state;
// };
// const appReducer = combineReducers({
// nav: navReducer,
// });
// const mapStateToProps = (state) => ({
// nav: state.nav
// });
// const App = connect(mapStateToProps)(AppComponent);
// const store = createStore(appReducer);
// class Root extends React.Component {
// render() {
// return (
// <Provider store={store}>
// <App />
// </Provider>
// );
// }
// }
export { Root }; export { Root };