redux学习记录

redux中的state:
1.安装redux

$ npm i redux --save
复制代码
2.进行引入：

import { createStore } from 'redux'
复制代码
3.创建reducer进行管理

const defaultState = {
list:[
'早8点开晨会，分配今天的开发工作',
'早9点和项目经理作开发需求讨论会',
'晚5:30对今日代码进行review'
]
}
export default (state=defaultState,action)=>{
return state
}
复制代码
4.在仓库中进行引入：

import reducer from './reducer'
复制代码
5.创建数据管理仓库并注入reducer并把仓库暴露出去:

const store = createStore(reducer)
export default store;
复制代码
6.在组件中进行引入：

import store from './store'
复制代码
7.获取到仓库中的数据

console.log(store.getState())
复制代码
reducer中的action：
1.在组件中写个方法并创建action

test(){
const action = {

type:"getItem"

}
复制代码
//把action派遣到仓库中

store.dispatch(action)
复制代码
2.在reducer中根据action的type进行操作：

export default(state=defaultState ,action){
// 在reducer中只能接收state但不能改变 （只读）,所以用newState 进行拷贝。

let newState = state

if(action.type === "getItem'' ){
//模拟添加一条
newState.list.push(newState.inputVal)
//返回 newState其实就是实现仓库数据的更新
return newState
}
}
复制代码
3.在react老版本中，仓库进行了更新了以后，需要在组件中进行订阅（subscribe）。

class TodoList extends Component {
constructor(){
super()
this.state = store.getState()
this.storeChange = this.storeChange.bind(this)
//订阅Redux的状态 改变仓库的状态
store.subscribe(this.storeChange)
}
复制代码
4.在组件里面写一个方法storeChange，其实就是又去获取一下store的状态。

storeChange(){
// 需要使用this.setState()
// getState是store的固定函数 获取状态
this.setState(store.getState())
}
复制代码
5.actionType的优化方法：创建一个actionType的文件。

export const GET_ITEM = 'getItem'
复制代码
6.在组件和仓库中进行引入和调用。

import {GET_ITEM } from './store/actionType'
复制代码
优势：快速显示报错。

7.action方法的优化，建立单独的js文件，进行创建、并在组件中引用使用：

import {CHANGE_INPUT,ADD_VALUE,DEAL_ITEM} from './actionType'
const changeInputAction = (value)=>({
type:CHANGE_INPUT,
value:value
})
const addValue = () =>({
type:ADD_VALUE,
})
const dealItem = (index) =>({
type:DEAL_ITEM,
index:index
})
export {
changeInputAction,
addValue,
dealItem
}
复制代码
组件中通过：const action = changeInputAction(value) 并 dispatch（action）

reducer需要注意的三点：
1.Store必须是唯一的

2.只有store能改变自己的内容，Reducer不能改变（通过return newState）

3.Reducer必须是纯函数。纯函数：如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

作者: Bill 本文地址: http://biaoblog.cn/info?id=1565936280000

版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！