– 关注前端和node js,分享福利和心得!

redux基础使用

创建store仓库

1. 安装

npm i redux -S

2. 新建仓库入口文件 store/index.js

//index.js
import {createStore} from "redux" //引入createStore方法
const store=createStore()//创建数据存储仓库
export default store

3.新建reducer文件 store/reducer.js

//reducer.js
const defaultState={
    inputValue:"",
    list:[]
}//定义默认数据
export default (state=defaultState,action)=>{
    return state
}

4.将reducer引入store

import {createStore} from "redux"
import reducer from "./reducer"
const store=createStore(reducer)
export default store

获取store仓库中的数据

1、引入store

import store from "./store"

2、在组件构造函数中赋值给state

constructor(props){
    super(props)
    this.state=store.getState()
    console.log(this.state)
}

3、在组件模板中使用仓库中的值

{this.state.inputValue}

修改store仓库中的值

1.在组件的构造函数中订阅仓库改变的方法

constructor(props){
    super(props)
    this.state=store.getState()//赋值给组件state
    this.storeChange=this.storeChange.bind(this)//修改this指向
    store.subscribe(this.storeChange)//订阅store修改
}
storeChange(){
     this.setState(store.getState())
 }

2.创建action

要改变redux中的state的值,就要创建action了,action就是一个对象,一般有两个属性,第一个是action的类型描述,第二个是改改变的值

changeInput(){
    const action={
        type:'add',
        value:e.target.value
    }
}

3、通过dispatch()方法传递给store

changeInput(){
    const action={
        type:'add',
        value:e.target.value
    }
    store.dispatch(action)
}

4、在reducer中接收传递过来的action

export default (state={defaultState,action})=>{
    if(action.type=='add'){
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue=action.value
        return newState
    }
    return state
}
  • state:指的是原始仓库里的值

  • action:指的是action新传递的状态

    reducer接收到传递过来的数据后,首先判断type是不是正确的,如果正确,我们需要声明一个变量newState,(reducer里面只能接收state,不能改变state),最后return返回新变量

    到这里,redux的工作流程已经完成了,但是实际上还有很多需要优化的点。

1.使用actionTypes.js统一管理action中的type

//store/actionTypes.js
export const CHANGE_INPUT="change_input"
export const ADD_ITEM="addItem"
export const REMOVE_ITEM="removeIttem"

在所有定义action和reducer的地方,引入actionTypes,并替换相应的action type

import {CHANGE_INPUT,ADD_ITEM,REMOVE_ITEM} from './store/actionTypes'
changeInput(){
    const action={
        type:CHANGE_INPUT,
        value:e.target.value
    }
    store.dispatch(action)
}
export default (state=defaultState,action)=>{
    if(action.type==CHANGE_INPUT){
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue=action.value
        return newState
    }
    return state
}

2.使用actionCreators.js统一管理action

//store/actionCreators.js
export const chaangeInputAction=value=>({
    type:CHANGE_INPUT,
    value
})

export const addItemAction=()=>({
    type:ADD_ITEM
})
export const removeItemAction=index=>({
    type:REMOVE_ITEM,
    index
})
  • 改造组件中的action
    changeInput(e){
    const action=changeInputAction(e.taraget.value)
    sstore.dispatch(action)
    }
    addItem(){
    const action=addItemAction()
    store.dispatch(aaction)
    }
    removeItem(index){
    const action=removeItemAction(index)
    store.dispatch(action)
    }

Store必须是唯一的

在整个应用中,只在store/index中通过createStore()声明了一个store,之后整个应用都在使用这个store

只有store能改变自己的内容,reducer不能改变store的内容

虽然我们在reducer中处理业务逻辑,但是reducer中并不能改变store,我们只是在reducer中声明了一个新的state,最后返回给store。

所以reducer只是返回了更改的数据,但是并没有修改store中的数据,store拿到reducer传递的数据,自己对自己进行了修改

reducer必须是纯函数

如果函数的入参相同,函数返回的结果总是相同,就称为纯函数。它不依赖于程序执行过程中函数外部任何状态或者数据的改变,只依赖于函数的输入参数

简而言之,就是函数的返回结果是由传入的值决定的,而不是其他的东西决定的。

比如在reducer中增加一个异步ajax函数,获取后端接口数据,然后再返回,这是不允许的, 包括使用日期函数new Date()也是不允许的,因为不是纯函数了,违反了调用参数相同,返回相同的结果。

最新文章

    热门文章