Redux简介
1、Redux 是一个状态容器
Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当前状态和 Action 共同的作用结果。 对于view来说,不用关心数据是怎样变化,只需要在 view 层面等待 store 通知自己数据发生变化,然后把数据渲染成页面即可。
2、Redux 和 React 之间没有关系
Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。 尽管如此,Redux 还是和 React 和 Deku 这类框架搭配起来用最好,因为这类框架允许你以 state 函数的形式来描述界面,Redux 通过 action 的形式来发起 state 变化。
Redux的工作流程图
redux的工作流程图看起来比较复杂,但是换一个例子来进行理解,会感觉还是比较简单的。在网上看到了这样的一篇文章,将Redux的工作流程比喻成图书馆借书那就很容易理解了,具体链接为Redux入门教程 - 简书
具体使用步骤
1.创建个store文件夹,创建个记录本文件reducer.js,用来存放一些数据和行为
let defaultState={
inputVal:"",
list:["测试1","测试1","测试1","测试1"],
};
export default (state=defaultState,action)=>{
if(action.type==="input_change_value"){
let newState=JSON.parse(JSON.stringify(state));
newState.inputVal=action.value;
return newState;
}else if(action.type==="input_submit_value"){
let newState=JSON.parse(JSON.stringify(state));
newState.inputVal="";
newState.list.push(action.value);
return newState;
}else if(action.type==="input_delete_value"){
let newState=JSON.parse(JSON.stringify(state));
newState.list.splice(action.value,1);
return newState;
}
return state;
}
2. 创建个图书管理员store,在store文件夹下创建index.js文件,将创建好的记录本文件引入进去
import {createStore} from 'redux'
import reducer from './reducer'
const store=createStore(reducer);
export default store;
3.现在就可以通过告诉store是什么行为来获取数据或者改变reducer中的数据了
import React,{Component} from "react";
import store from './store/index.js'
class Test extends Component{
constructor(props){
super(props);
//获取reducer中的数据
this.state=store.getState();
}
render(){
return (
<div>
</div>
)
}
changeInput(e){
let action={
type:"input_change_value",
value:e.target.value
}
store.dispatch(action);
}
handleSubmit(){
let value=this.state.inputVal;
let action={
type:"input_submit_value",
value
}
//提交行为告诉store该干什么,store根据reducer中储存的行为进行操作
store.dispatch(action);
}
delItem(index){
let value=index;
let action={
type:"input_delete_value",
value
}
store.dispatch(action);
}
}
export default TodoList;
以上为大致使用,但是还是需要优化的地方
提交行为action的时候type是必须要传的,如果我们一不小心将type值拼写错误,控制台是不会报任何错误的,一旦发生这种情况,将给调试带来很大困难。所以一般情况,我们可以将action的Type拆除为一个单独的文件actionTypes.js
export const INPUT_CHANGE_VALUE="input_change_value";
export const INPUT_SUBMIT_VALUE="input_submit_value";
export const INPUT_DELETE_VALUE="input_delete_value";
使用actionCreator统一创建action
之前代码我们把action的创建都放在了组件中,写一些简单的项目确实可以这样做,但是如果是大型项目,就需要将创建action这个动作放入到一个文件进行统一的管理,我们在store文件夹内创建actionCreators.js,代码如下:
import {INPUT_CHANGE_VALUE,INPUT_SUBMIT_VALUE,INPUT_DELETE_VALUE} from "./actionTypes.js"
export let getChangeValueAction=(value)=>{
return {
type:INPUT_CHANGE_VALUE,
value,
}
}
export let getSubmitValueAction=(value)=>{
return {
type:INPUT_SUBMIT_VALUE,
value,
}
}
export let getDeleteValueAction=(value)=>{
return {
type:INPUT_DELETE_VALUE,
value,
}
}
使用方法,在需要用到的组件中引入,调用
import {getChangeValueAction,getSubmitValueAction,getDeleteValueAction} from "./store/actionCreators.js"
.
.
.
.
.
.
.
changeInput(e){
let action=getChangeValueAction(e.target.value);
store.dispatch(action);
}