首先区别redux和react-reduex,redux是一个单独的模块,在其他框架中也能使用,而react-redux是为react管理数据而生。 Redux 的设计思想很简单,就两句话。
(1)Web 应用是一个状态机,视图与状态是一一对应的。
(2)所有的状态,保存在一个对象里面。
redux使用:首先安装 npm i redux 在src文件目录下新建一个文件夹叫redux,文件夹中新建四个文件
constant.js 用于存储action对象中的type类型常量,目的只有一个;方便管理的同时防止程序员单词写错,
例如:
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
action.js 该文件专门为组件生成action对象
import {INCREMENT,DECREMENT} from './constant'
//同步action,就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
//异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time)=>{
return (dispatch)=>{
setTimeout(()=>{
dispatch(createIncrementAction(data))
},time)
}
}
reducer.js
/*
1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
2.reducer函数会接到两个参数,分别为:之前的状态(preState),动作对象(action)
*/
const initState = 10 //初始化状态
export default function countReducer(preState=initState,action){
console.log(preState,action);
//从action对象中获取:type、data
const {type,data} = action
//根据type决定如何加工数据
switch (type) {
case 'increment': //如果是加
return preState + data
case 'decrement': //若果是减
return preState - data
default:
return preState
}
}
store.js 该文件专门用于暴露一个store对象,整个应用只有一个store对象 要下载 npm i redux-thunk --save
//引入createStore,专门用于创建redux中最为核心的store对象,引入applyMiddleware中间件转发
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducer'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk';
//暴露store
export default createStore(countReducer,applyMiddleware(thunk));
最后在index.js文件中引入store并设置监听
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
ReactDOM.render(<App />,document.getElementById('root'))
store.subscribe(()=>{ //设置监听,只要state改变数据页面就会更新
ReactDOM.render(<App/>,document.getElementById('root'))
})
// 引入store,用于获取redux中保存状态
import store from '../../redux/store'
// 操作异步数据 引入相应的action函数
import {createIncrementAsyncAction} from '../../redux/action'
increment = ()=>{ //同步函数的调用
const {value} = this.selectNumber
store.dispatch({type:'increment',data:value*1})
}
incrementAsync = ()=> {//异步函数的调用
const {value} = this.selectNumber;
store.dispatch(createIncrementAsyncAction(value*1,500))
}
<h1>当前求和为:{store.getState()}</h1>//获取store中的返回值
不停学习,热爱是源源不断的动力。