redux的使用(二)--redux-actions

安装

源码：https://github.com/redux-utilities/redux-actions
安装：yarn add redux-actions 或npm install --save redux-actions

使用方式

通过一个案例记录下redux-actions的使用。

• 步骤一.reducx-actions是在redux的基础上，对actions和reducer进行优化和管理。因为需要定义store
• 步骤二.新建actionType.js：定义action的类型
• 步骤三.新建action.js:调用createAction或createActions去定义action
• 步骤四.新建reducer.js:调用handleAction或handleActions去监听action
• 步骤五.App.js使用react-redux的connet和Provider去维护管理store，并正确使用store的值和方法赋值给控件的this.props

以下通过代码按步骤进行编码

步骤一 定义store

//store/index.js
import {createStore, applyMiddleware,compose} from 'redux'
import reducer from "./reducer";
const store = createStore(reducer)
export default store

创建index.js：调用redux的api函数createStore新建store，reducer用来监听action及处理对应action的函数

步骤二 定义action.type

新建actioType.js定义行为类型，为了保证行为类型宏定义，不易写错。
定义了两个行为GET_STUDENT_LIST和ADD_STUDENT_LIST

//actioType.js
const GET_STUDENT_LIST = 'get_student_list'
const ADD_STUDENT_LIST = 'add_student_list'
export default {GET_STUDENT_LIST, ADD_STUDENT_LIST}

步骤三 定义action行为

新建studentActions.js，定义具体的行为。

//studentActions.js
import actionType from "./actionType";
import {createActions} from "redux-actions";

export default createActions({
    [actionType.GET_STUDENT_LIST]:()=>{},
    [actionType.ADD_STUDENT_LIST]:(student)=>{return student},
})

调用redux-actions的API函数createActions。使用方式如下：

createActions({
  [action.type]:()=>{},
  [action.type]:(value1)=>{ return value2 }
})

三个知识点：

1. 定一个无传参和返回的行为[action.type]:()=>{}
2. 定一个无传参和返回的行为[action.type]:(value1)=>{return value2}
3. createActions会返回action，如action.type='get_student_list'，则返回action对象getStudentList（去掉下划线，驼峰结构)，供组建调用

步骤四 定义reducer

新建reducer.js，监听action的行为并定义对应action的函数

//reducer.js
import {handleActions} from "redux-actions";
import actionType from "./actionType";

const defaultState = {
    students:[{name:'默认',age:0}]
}

export default handleActions({
    [actionType.GET_STUDENT_LIST]:(state, action)=>{
        const students = [{name:'张同学',age:19},{name:'李同学',age:19},{name:'王同学',age:19}]
        return {
            ...state,
            students:students
        }
    },
    [actionType.ADD_STUDENT_LIST]:(state, action)=>{
        return {
            ...state,
            students: [...state.students, action.payload]
        }
    }
},defaultState)

1.定义默认的state，作为store的返回值/默认值
2.调用redux-actions的API函数handleActions来监听action和对应action的操作，基本调用方式。

handleActions(
    {
        [action.type]:(state, action)=>{ return {...state, key:value}}
    }, 
  defaultState)

action行为定义： [action.type]:(state, action)=>{ return {...state, key:value}}
默认state的赋值：defaultState
3.action.payload:固定搭配使用，action.js定义的具体action的返回值[actionType.ADD_STUDENT_LIST]:(student)=>{return student},即payload=studeng

步骤五

reducer的定义

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from "react-redux";
import store from "./store";

ReactDOM.render(
    
        
    ,

    document.getElementById('root')
);

在根的index.js外层包裹 ，这样实现react-redux的监听

App.js使用

//App.js
import React from 'react'
import studentActions from "./store/studentActions";
import {connect} from "react-redux";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.props.getStudentList()
        this.studentName = React.createRef()
        this.studentAge = React.createRef()
    }

    addStudentBtn = () => {
        const name = this.studentName.current.value
        const age = parseInt(this.studentAge.current.value)
        const student = {name:name, age:age}
        this.props.addStudent(student)
    }

    render() {
        const {students} = this.props
        return (
            

                
学生信息
                    

                        {
                            students.map((student, index) => {
                                    return 
姓名： {student.name} ;年龄：{student.age}
                                }
                            )
                        }
                    
                    
学生姓名
                        
                    
                    
学生年龄
                        
                    
                    

                        添加
                    
                

            
        )
    }
}

const mapStateToProps = (state) => {
    return {
        students: state.students
    }
}

export default connect(mapStateToProps, {
    getStudentList: studentActions.getStudentList,
    addStudent: studentActions.addStudentList,
})(App)

关注几个点：

export default connect(mapStateToProps, {
    getStudentList: studentActions.getStudentList,
    addStudent: studentActions.addStudentList,
})(App)

1.mapStateToProps:函数定义了组建使用到的store的属性，如students: state.students，store的state.students赋值给当前控件的this.props. students

{
    getStudentList: studentActions.getStudentList,
    addStudent: studentActions.addStudentList,
}

2.将createActions的action与组建的props进行关联
getStudentList: studentActions.getStudentList:(studentActions.getStudentList)createActions会一个action名称，规则为去除下划线驼峰，并与当前控件的this.props.studentActions，使用this.props.getStudentList()即可调用