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的赋值:
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()
即可调用推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量