redux学习记录

2022-08-11 18:58:34 浏览数 (1)

redux中的state:

1.安装redux

代码语言:javascript复制
$ npm i redux --save

2.进行引入:

代码语言:javascript复制
import { createStore } from 'redux'

3.创建reducer进行管理

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

4.在仓库中进行引入:

代码语言:javascript复制
import reducer from './reducer'

5.创建数据管理仓库并注入reducer并把仓库暴露出去:

代码语言:javascript复制
const store = createStore(reducer)
export default store;

6.在组件中进行引入:

代码语言:javascript复制
import store from './store'

7.获取到仓库中的数据

代码语言:javascript复制
console.log(store.getState())

reducer中的action:

1.在组件中写个方法并创建action

代码语言:javascript复制
test(){
 const action = {
	type:"getItem"
}

//把action派遣到仓库中

代码语言:javascript复制
store.dispatch(action)

2.在reducer中根据action的type进行操作:

代码语言:javascript复制
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)。

代码语言:javascript复制
class TodoList extends Component {
 constructor(){
 super()
 this.state = store.getState()
 this.storeChange = this.storeChange.bind(this)
 //订阅Redux的状态 改变仓库的状态
 store.subscribe(this.storeChange)
 }

4.在组件里面写一个方法storeChange,其实就是又去获取一下store的状态。

代码语言:javascript复制
 storeChange(){
 // 需要使用this.setState()
 // getState是store的固定函数 获取状态
 this.setState(store.getState())
 }

5.actionType的优化方法:创建一个actionType的文件。

代码语言:javascript复制
export const GET_ITEM = 'getItem'

6.在组件和仓库中进行引入和调用。

代码语言:javascript复制
import {GET_ITEM } from './store/actionType'

优势:快速显示报错。

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

代码语言:javascript复制
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必须是纯函数。纯函数:如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。

0 人点赞