一直想将项目中使用的redux,写成一篇博客,但是又碍于对Redux的掌握能力有限,只能在项目完结的时候,稍稍整理一下redux在项目中全局获取 用户的信息,从用户登录,到修改用户信息,和退出登录全局使用Redux进行保存用户信息,修改用户信息,清空用户信息,一套小小的入门代码。
项目中redux基于react-navigation,可做到:
- 某个组件的状态,需要全局共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
由于项目篇幅涉及的可能会比较多,简单的一些操作,这里不做教程
1、我们要npm一下redux的相关组件
redux、react-redux 、redux-actions、redux-thunk
2、当然不能少了 react-navigation
1、项目中iOS和android,我们注册导出的根组件为Root
import {
AppRegistry,
} from 'react-native';
import Root from './shop/Root';
AppRegistry.registerComponent('ReactNative', () => Root);
2、在Root.js中
import {AppStack} from './Router' // 路由栈(使用react-navigation封装出来的路由栈)
import {Provider} from 'react-redux';
import configureStore from './redux/Store'
const store = configureStore({});
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<AppStack />
</Provider>
);
}
}
3、此时我们创建一个redux文件夹,里面包含Reducer,Action,Store
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
Action 是一个对象
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。
文件夹如下图:
4、我们先创建一个ActionTypeConf.js
// 用户信息
export const USER_INFO_GET_LOCAL = 'USER_INFO_GET_LOCAL'; // 获取本地用户信息
export const EDIT_USER = 'EDIT_USER'; // 编辑用户信息
export const USER_CLEAR = 'USER_CLEAR'; // 清空用户信息
5、创建User.js
import *