React 実践プロジェクトを共有する

前回はReactを使ってヘッダー付きのホームページを書く話をしました

Rudex

アプリケーション内のすべての状態は の形式になっています。オブジェクト ツリー 単一のストアに格納されます。
状態を変更する唯一の方法は、アクション、何が起こったかを説明するオブジェクトをトリガーすることです。
アクションが状態ツリーをどのように変更するかを記述するには、リデューサーを記述する必要があります。

ログインと登録のステータス管理を開始します

まず、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')
);

在 App.js 中获取 action 和 状态

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});
      }
    });
  };

流程是：

• 调用 action
  this.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里的状态 newUserrrreee
。ここから取得します

package.json の依存関係を忘れずに更新してください🎜🎜次にキーコードの説明を始めます🎜

• 🎜action🎜 action/users.js 🎜

rrreee

• 🎜reducer🎜reducer/users.js🎜

rrreee

• 🎜store🎜store/store.js🎜

rrreee🎜次に、store を使用します🎜🎜src/React 実践プロジェクトを共有する.js🎜エントリーファイル内の rrreee🎜 App.js でアクションとステータスを取得する 🎜rrreee🎜 デコレーターのバージョン: 🎜Babel でデコレーターをオンにする必要がある🎜 デコレーター プラグイン babel-plugin-transform-decorators-legacy 🎜rrreee🎜最後に、registerActions が RegisterDialog サブコンポーネント、🎜🎜src/components/Index/RegisterDialog.js に渡されます🎜rrreee

プロセスは次のとおりです:

• 🎜アクションを呼び出す🎜this.props.registerActions(this.state.user);🎜アクションを返す🎜

rrreee

• 🎜reducer はアクション タイプに応じてステータスを更新します🎜

rrreee🎜この時点で、ストアのステータス newUser は次のとおりです登録ポップアップ ウィンドウで収集されたデータに更新されます🎜 この時点まではまだ同期アクションですが、登録は非同期操作です。 🎜🎜

以上がReact 実践プロジェクトを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。