redux的简单理解和使用

作者: 樊小勇 | 来源:发表于2019-04-22 12:02 被阅读0次

一、redux简介

redux 状态储存，用于储存用户状态，根据状态判断
state=>存放储存状态的变量
action =>派发任务(修改方法)
reducer=>储存修改变量的方法
react里redux是对应每个组件都有一个redux文件，最后回归到一个总的redux文件里，action也是一样。
简单理解就是一对多，一个总的redux对应多个子的redux，子的进行更改总的也会更改。

rekit脚手架里

组件中的文件结构介绍

导入redux相关的，
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
把redux里所有的actions导入到actions里



/* 把redux里的state放入props */
function mapStateToProps(state) {
  return {
    denglu: state.denglu,
  };
}

// 把所有的action放入props
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}
// 导出
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);

然后开始配置redux以及action

在组件里的actions里的init文件里面定义存储状态的变量

const initialState = {
  isLogin:false,
  userName:''
};

export default initialState;

对应的之后创建一个action来派发修改变量的方法，取名可以用change开头

export function changeLoginState(payload) {
  return {
    type: DENGLU_CHANGE_LOGIN_STATE,
    payload
  };
}

再来进入刚才建好的action里
格式为

import {
  DENGLU_CHANGE_LOGIN_STATE,
} from './constants';
// payload 传来的参数
export function changeLoginState(payload) {
  return {
    type: DENGLU_CHANGE_LOGIN_STATE,
    payload
// 参数引进来
  };
}
/**
 * reducer,用来修改state的值
 * state是全局的state,包含了所有模块设置的state
 * action是所有模块派发的action,这里都能收到
 */
export function reducer(state, action) {
  switch (action.type) {
    case DENGLU_CHANGE_LOGIN_STATE:
      return {
        ...state,
        isLogin:action.payload
// action.type选中当前的action,而参数对应的就是action.payload
      };

    default:
      return state;
  }
}

使用(修改状态值)

// 登陆成功后,修改isLogin的值(派发action)
    this.props.actions.changeLoginState(true);
    // 用户名
    let name = res.user.username;
    this.props.actions.changeUsername(name);

使用非本组件的redux

导入
import * as loginActions from '../login/redux/actions'
使用
/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    me: state.me,
    isLogin: state.login.isLogin,
    username: state.login.username
// 变量名称需要对应
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions,...loginActions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Me);

组件使用
因为这些步骤之后，redux里的状态变量已经放在props里我们可以直接通过props访问到该变量
然后条件渲染来使用

二、图解

1.定义储存状态的变量

定义变量
2.action内部设置

内部设置
3.把redux的state和action传给容器组件的props,并把props全部传给视图子组件
{...this.props} 扩展运算符的特性

props赋值
4.视图子组件获取并更改redux的值

获取、修改
5.上面四步都是同一个组件Denglu里的，下面外部组件使用Denglu的图解
1.导入其他组件的redux

导入denglu的redux

2.将导入的其他组件的redux，添加到当前组件的props里并传给视图组件

导入外部redux到props
3.视图组件使用props获取其他组件传来的数据
使用redux数据