redux的使用(二)--redux-actions
安装
源码：https://github.com/redux-utilities/redux-actions
安装：yarn add redux-actions 或npm install --save redux-actions
使用方式
【redux的使用(二)--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 }
})
三个知识点：
- 定一个无传参和返回的行为
[action.type]:()=>{} - 定一个无传参和返回的行为
[action.type]:(value1)=>{return value2} - createActions会返回action，如
action.type='get_student_list'，则返回action对象getStudentList（去掉下划线，驼峰结构)，供组建调用
//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的赋值：
defaultState3.
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外层包裹
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()即可调用推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量