RudexTous les états de l'application sont stockés dans un seul magasin sous la forme d'une arborescence d'objets.La dernière fois, nous avons parlé d'utiliser React pour écrire une page d'accueil avec un en-tête. Cette fois, nous utiliserons Redux pour la gestion de l'état en pratique
La seule façon de changer d'état est de déclencher une action, un objet qui décrit ce qui s'est passé.
Pour décrire comment les actions modifient l'arbre d'état, vous devez écrire des réducteurs.
sous le répertoire src
, le répertoire est le suivant redux
digag ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ └── favicon.ico │ └── Partager un projet de pratique React.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 └── Partager un projet de pratique React.css └── Partager un projet de pratique React.js └── logo.svg └── registerServiceWorker.js
package.json
action/users .js
/* * action 类型 */ export const REGISTER_USER = 'REGISTER_USER'; // 省略其他action 类型 /* * action 创建函数 */ export const registerAction = (newUser) => { return{ type:REGISTER_USER, data: newUser, } }; // 省略其他 action 创建函数
réducteur/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.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
import {Provider} from 'react-redux'; import store from './redux/store/store'; // 省略其他 ReactDOM.render( <provider> <app></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> //省略 </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 普通对象
Plug-in du décorateurbabel-plugin-transform-decorators-legacy
@connect( (state) => { console.log(state); return ({ users: state.users, }); }, {registerActions: registerAction, loginActions: loginAction} )
registerActions
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}); } }); };
renvoie l'action car this.props.registerActions(this.state.user);
{ type:REGISTER_USER, data: this.state.user, }
switch (action.type) { case REGISTER_USER: return state.merge({ 'newUser': action.data, 'saveSuccess': false, 'error': null, }); //省略其他代码
Jusqu'à présent il s'agit toujours d'une action synchrone, tandis que l'enregistrement est une action asynchrone. newUser
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!