上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理
应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action,一个描述发生什么的对象。
为了描述 action 如何改变 state 树,你需要编写 reducers。
我们接下来开始开始进行登陆与注册的状态管理
首先在 src
目录下创建 redux
文件夹,目录如下
digag ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ └── favicon.ico │ └── index.html │ └── manifest.json └── src └── components └── Index └── Header.js └── LoginDialog.js └── RegisterDialog.js └── containers └── App └── App.js └── App.css └── redux └── action └── users.js └── reducer └── auth.js └── users.js └── sagas └── api.js └── sagas.js └── selectors.js.js └── users.js └── store └── store.js └── App.test.js └── index.css └── index.js └── logo.svg └── registerServiceWorker.js
代码可从此获取
记得在 package.json
中更新依赖
action
action/users.js
/* * action 类型 */ export const REGISTER_USER = 'REGISTER_USER'; // 省略其他action 类型 /* * action 创建函数 */ export const registerAction = (newUser) => { return{ type:REGISTER_USER, data: newUser, } }; // 省略其他 action 创建函数
reducer
reducer/users.js
//Immutable Data 就是一旦创建,就不能再被更改的数据。 //对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。 import Immutable from 'immutable'; //从 action 导入需要的 action 类型 import {REGISTER_USER, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE} from '../action/users'; // 初始化状态 const initialState = Immutable.fromJS({ newUser: null, error: null, saveSuccess: false, }); // reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。 export const users = (state = initialState, action = {}) => { switch (action.type) { // 判断 action 类型 case REGISTER_USER: return state.merge({ // 更新状态 'newUser': action.data, 'saveSuccess': false, 'error': null, }); case REGISTER_USER_SUCCESS: return state.set('saveSuccess', action.data); case REGISTER_USER_FAILURE: return state.set('error', action.data); default: return state } };
store
store/store.js
import {createStore, combineReducers, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga' import * as reducer from '../reducer/users'; import rootSaga from '../sagas/sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore( combineReducers(reducer), applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(rootSaga); export default store;
store
src/index.js
import {Provider} from 'react-redux'; import store from './redux/store/store'; // 省略其他 ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
import {registerAction, loginAction} from '../../redux/action/users'; import {connect} from "react-redux"; import {bindActionCreators} from "redux"; //省略其他 class App extends Component { render(){ return( <div className="App"> //省略 </div> ) } } export default connect( (state) => { // 获取状态 state.users 是指 reducer/users.js 文件中导出的 users // 可以 `console.log(state);` 查看状态树 return { users: state.users } }, (dispatch) => { return { // 创建action registerActions: bindActionCreators(registerAction, dispatch), loginActions: bindActionCreators(loginAction, dispatch), } })(App); // 在App 组件的props里就有 this.props.users this.props.registerActions this.props.loginActions 了 // 需要注意的是这里this.props.users是Immutable 对象,取值需要用this.props.users.get('newUser') // 也可在 reducer 里改用 js 普通对象
装饰器版本:
需要在Babel中开启装饰器
装饰器插件babel-plugin-transform-decorators-legacy
@connect( (state) => { console.log(state); return ({ users: state.users, }); }, {registerActions: registerAction, loginActions: loginAction} )
registerActions
传给RegisterDialog子组件,src/components/Index/RegisterDialog.js
// 省略其他代码 handleSubmit = (e) => { e.preventDefault(); // 验证表单数据 this.refs.user.validate((valid) => { if (valid) { // this.state.user 为表单收集的 用户注册数据 this.props.registerActions(this.state.user); this.setState({loading: true}); } }); };
调用 actionthis.props.registerActions(this.state.user);
返回action 为
{ type:REGISTER_USER, data: this.state.user, }
reducer 根据action类型更新状态
switch (action.type) { case REGISTER_USER: return state.merge({ 'newUser': action.data, 'saveSuccess': false, 'error': null, }); //省略其他代码
这时我们的store里的状态 newUser
就被更新为 注册弹窗里收集的数据
到这里都还是同步的action,而注册是一个异步的操作。
以上是分享一个React的实践项目的详细内容。更多信息请关注PHP中文网其他相关文章!