Create a gist now

Instantly share code, notes, and snippets.

@wd /App.js
Last active Oct 21, 2017

What would you like to do?
React-native react-redux with react-navigation StackNavigator single page demo
/**
* 一个简单的 RN 应用,有 2 个页面,使用了 react-navigation 的 StackNavigator 来做界面管理
* 为了说明如何使用 redux,以及如何让 redux 和 StackNavigator 配合
* 为了容易理解,把所有内容都放到了一个页面里面,实际开发的时候不要这么做
* 参考:
* https://github.com/jackielii/simplest-redux-example
* http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { StackNavigator, addNavigationHelpers } from 'react-navigation';
// Home 页面,UI 组件
class MyHome extends Component {
constructor(props) {
super(props);
console.log('init home, props', props);
}
_nextPage() {
// navigation 依然在 this.props 里面获取,和不用 redux 的时候用法一样
let {navigation} = this.props;
navigation.navigate("App");
}
render() {
// 所有的传递过来的状态,都需要从 this.props.screenProps 里面读取 (4)
// 我这里给不同页面的 action 取了各自的命名空间,避免冲突,也可以直接所有 action 都在一个命名空间,这块我还在摸索如何处理比较好 (5)
let {onIncButtonClicked} = this.props.screenProps.MyAppActions;
// 界面有两个按钮,一个用来增加另外一个页面的计数器,一个用来访问下一个页面
return (
<View style={styles.container}>
<Button title="Inc counter" onPress={onIncButtonClicked}></Button>
<Button title="Next page" onPress={()=>this._nextPage()}></Button>
</View>
)
}
}
// 这个组件只是用来测试就算一个 props 传递给子组件,在 props 被修改的时候也会被自动刷新
class ShowText extends Component {
render() {
let {counter} = this.props;
return (
<Text>{counter}</Text>
)
}
}
// App 页面,UI 组件
class MyApp extends Component {
constructor(props) {
super(props);
console.log('init App, props', props);
}
componentWillReceiveProps(newProps) {
console.log('myapp recive props', newProps);
}
render() {
// 组件的 state/props 获取,有自己的命名空间 (1)
let {counter} = this.props.screenProps.MyApp;
// 组件的 action props (5)
let {onIncButtonClicked, onDecButtonClicked} = this.props.screenProps.MyAppActions;
// 界面有一个计数器的结果,两个按钮
return (
<View style={styles.container}>
<ShowText counter={counter} />
<Button title="Inc counter" onPress={onIncButtonClicked}></Button>
<Button title="Dec counter" onPress={onDecButtonClicked}></Button>
</View>
)
}
}
// 初始化 StackNavigator,定义页面路由
let AppNavigator = StackNavigator({
Home: {
screen: MyHome
},
App: {
screen: MyApp
}
});
// 包装一下 StackNavigator,因为有些参数需要定制一下
class MyStackNavigator extends Component {
constructor(props) {
super(props);
console.log("inside MyStackNavigator", props);
}
render() {
// screenProps: 使用这个往所有的页面传递 props,这个是和直接使用 redux 不同的地方 (4)
// navigation: 因为使用 redux 之后,就不会直接操作 this.state 了,所以得告诉 StackNavigator dispatch 方法和 state 从哪里读取
return (
<AppNavigator
screenProps={this.props}
navigation={addNavigationHelpers({
dispatch: this.props.dispatch, // 通过 action props 定义 (2)
state: this.props.nav, // 通过 state props 定义 (3)
})} />
)
}
}
// 定义 state 和 props 的关系,所有 redux 应用都需要 (6)
let mapStateToProps = (state, ownProps) => {
console.log("inside mapstate to props", state, ownProps);
return {
// 这两个是不同的命名空间,和上面你使用的时候的路径对应 (1)
"MyApp": state.MyApp,
"MyHome": state.MyHome,
// 定义 StackNavigator 的 state (3)
"nav": state.nav
}
};
// 定义 action 和 props 的关系,所有 redux 应用都需要
let mapDispatchToProps = (dispatch, ownProps) => {
console.log("inside map dispath to props");
return {
// 这两个也是不同的命名空间,和上面使用的时候路径对应 (5)
'MyAppActions': {
onIncButtonClicked: () => {
let action = {
type: "INC_COUNTER",
payload: 1
};
dispatch(action);
},
onDecButtonClicked: () => {
let action = {
type: "DEC_COUNTER",
payload: -1
};
dispatch(action);
}
},
'MyHomeActions': {
onNextButtonClicked: () => {
let action = {
type: "NEXT_PAGE"
};
dispatch(action);
}
},
// 定义 StackNavigator 的 action props (2)
'dispatch': dispatch
}
}
// 定义 home 页面的 reducer,不过因为那个页面唯一的一个 action 是触发别的页面的动作的,所以这个 reducer 其实也可以没有
// 所以从这里也能看出来,reducer 并不一定按照页面去分
let homeReducer = (state, action) => {
console.log("inside home reducer", state, action);
return state || {};
};
// 定义一个初始化的 state
let myAppInitState = { 'counter': 10};
// 定义 app 页面的 reducer
let myAppReducer = (state = myAppInitState, action) => {
// 收到的 state 实际上只是自己命名空间下的 (6)
console.log("inside myAppReducer", state, action);
let myState = state;
// 需要处理的 action 的逻辑
// 要注意,一个 action 被触发的时候,所有的 reducer 都会被调用,所以其实更像是订阅自己想要处理的 action
switch (action.type) {
case "DEC_COUNTER":
case "INC_COUNTER":
// 如果修改了 state,必须要返回一个新的对象,不能直接在原对象上修改,否则 state 变化不会触发组件的刷新
return Object.assign({}, myState, {
'counter': myState.counter + action.payload
});
default:
return state;
}
};
// 定义一个 StackNavigator 用到的初始化状态,这个很重要
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Home'));
// 定义 StackNavigator 的 reducer,代码直接复制来的
const navReducer = (state = initialState, action) => {
console.log("inside nav reducer", state, action);
const nextState = AppNavigator.router.getStateForAction(action, state);
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
};
// 创建 store
let store = createStore(combineReducers({
// 这里的 MyApp 等和前面定义 mapStateToProps 的地方对应 (6)
// 这里也是导致 reducer 收到的 state 只有自己命名空间下数据的一个原因 (6)
MyApp: myAppReducer,
MyHome: homeReducer,
nav: navReducer
}));
// 让 redux 加持一下,保佑
let App = connect(mapStateToProps, mapDispatchToProps)(MyStackNavigator);
// 其他的就是比较常见的 redux 的逻辑了,另外需要说明的是实际使用的时候,肯定会做页面拆分,如何拆分可能都会有不同的看法,我也还在摸索
export default class Root extends Component<{}> {
constructor(props) {
super(props);
}
render() {
return (
<Provider store={store}>
<App prop1="prop1" />
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Owner

wd commented Oct 21, 2017

rev1 is a simple react-redux app, rev2 is a example for react-redux work with react-navigation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment