前回はReactを使ってヘッダー付きのホームページを書く話をしました
アプリケーション内のすべての状態は の形式になっています。オブジェクト ツリー 単一のストアに格納されます。
状態を変更する唯一の方法は、アクション、何が起こったかを説明するオブジェクトをトリガーすることです。
アクションが状態ツリーをどのように変更するかを記述するには、リデューサーを記述する必要があります。
ログインと登録のステータス管理を開始します
まず、src
ディレクトリの下にredux
フォルダーを作成します。ディレクトリは次のとおりですsrc
目录下创建 redux
文件夹,目录如下
digag ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ └── favicon.ico │ └── 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 └── React 実践プロジェクトを共有する.css └── React 実践プロジェクトを共有する.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/React 実践プロジェクトを共有する.js
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 普通对象
装饰器版本:
需要在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
rrreee
。ここから取得します
package.json
の依存関係を忘れずに更新してください🎜🎜次にキーコードの説明を始めます🎜store
を使用します🎜🎜src/React 実践プロジェクトを共有する.js🎜エントリーファイル内の rrreee🎜 App.js でアクションとステータスを取得する 🎜rrreee🎜 デコレーターのバージョン: 🎜Babel でデコレーターをオンにする必要がある🎜 デコレーター プラグイン babel-plugin-transform-decorators-legacy
🎜rrreee🎜最後に、registerActions
が RegisterDialog サブコンポーネント、🎜🎜src/components/Index/RegisterDialog.js に渡されます🎜rrreeethis.props.registerActions(this.state.user);
🎜アクションを返す🎜newUser
は次のとおりです登録ポップアップ ウィンドウで収集されたデータに更新されます🎜 この時点まではまだ同期アクションですが、登録は非同期操作です。 🎜🎜以上がReact 実践プロジェクトを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。