React 실습 프로젝트 공유

저번에는 React를 사용하여 헤더가 있는 홈페이지를 작성하는 방법에 대해 이야기했습니다. 이번에는 실제로 상태 관리를 위해 Redux를 사용하겠습니다.

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🎜Decorator 버전: 🎜Babel🎜Decorator 플러그인 babel-plugin-transform- decorators-legacy에서 데코레이터를 켜야 합니다. 🎜rrreee🎜마지막으로 registerActions가 RegisterDialog 하위 구성 요소인 🎜🎜src/comComponents/Index/RegisterDialog.js🎜rrreee

프로세스는 다음과 같습니다.

• 🎜Call action🎜this.props.registerActions(this.state.user);🎜반환 작업은🎜

rrreee

• 🎜reducer는 액션 유형에 따라 상태를 업데이트합니다🎜

rrreee🎜 이때 저희 매장의 상태는 newUser입니다. 등록 팝업 창에 수집된 데이터로 업데이트됩니다🎜 지금까지는 여전히 동기 작업이지만 등록은 비동기 작업입니다. 🎜🎜

위 내용은 React 실습 프로젝트 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!