安装
源码：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 }
})
三个知识点：
- 定一个无传参和返回的行为
[action.type]:()=>{} - 定一个无传参和返回的行为
[action.type]:(value1)=>{return value2} - 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(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
在根的index.js外层包裹 <Provider store={store}>，这样实现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 (
<div>
<p>学生信息
<ul>
{
students.map((student, index) => {
return <li key={index}>姓名： {student.name} ;年龄：{student.age}</li>
}
)
}
</ul>
<p>学生姓名
<input type="text" ref={this.studentName}/>
</p>
<p>学生年龄
<input type="text" ref={this.studentAge}/>
</p>
<p>
<button onClick={this.addStudentBtn}>添加</button>
</p>
</p>
</div>
)
}
}
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()即可调用
