标签：const type 使用 action import redux data store
1.redux的使用
核心概念
action
-
动作的对象
-
包含2个属性
type：标识属性, 值为字符串, 唯一, 必要属性 data：数据属性, 值类型任意, 可选属性 -
例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
reducer
-
用于初始化状态、加工状态。
-
加工时，根据旧的state和action， 产生新的state的纯函数。
store
-
将state、action、reducer联系在一起的对象
-
如何得到此对象?
1) import {createStore} from 'redux' 2) import reducer from './reducers' 3) const store = createStore(reducer) -
此对象的功能?
1) getState(): 得到state 2) dispatch(action): 分发action, 触发reducer调用, 产生新的state 3) subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
求和案例使用redux
constant.js
/*
该模块是用于定义actions对象中type类型的常量值
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
count_action.js
/*
该文件专门为Count组件生成action对象
*/
import {INCREMENT, DECREMENT} from "./constant";
export const createIncrementAction = data => ({type: INCREMENT, data})
export const createDecrementAction = data => ({type: DECREMENT, data})
count_reducer.js
/*
1.该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
2.reducer函数会接收到两个参数，分别为：之前的状态(preState),动作对象(action)
*/
import {INCREMENT, DECREMENT} from "./constant";
const initState = 0 //初始化状态，页面渲染时会自动调用一次
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
/*
1.该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
2.reducer函数会接收到两个参数，分别为：之前的状态(preState),动作对象(action)
*/
import {INCREMENT, DECREMENT} from "./constant";
const initState = 0 //初始化状态，页面渲染时会自动调用一次
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
}
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./redux/store";
ReactDOM.render(<App />, document.getElementById('root'))
// 监测redux中状态的变化，只要变化，就调用render
store.subscribe(()=>{
ReactDOM.render(<App />, document.getElementById('root'))
})
Count.jsx
import React, {Component} from 'react';
// 引入store， 用于获取redux保存的状态
import store from "../../redux/store";
// 引入actionCreator, 专门用于创建action对象
import {createDecrementAction, createIncrementAction} from "../../redux/count_action";
class Count extends Component {
state = {count: 0}
// 第二种方法：第一种在index.js订阅
// componentDidMount() {
// // 监测redux中状态的变化，只要变化，就调用render
// store.subscribe(()=>{
// this.setState({})
// })
// }
increment = () => {
const {value} = this.selectNumber
store.dispatch(createIncrementAction(value*1))
}
decrement = () => {
const {value} = this.selectNumber
store.dispatch(createDecrementAction(value*1))
}
incrementOdd = () => {
const {value} = this.selectNumber
const count = store.getState()
if (count % 2 !== 0) {
store.dispatch(createIncrementAction(value*1))
}
}
incrementAsync = () => {
const {value} = this.selectNumber
setTimeout(() => {
store.dispatch(createIncrementAction(value*1))
}, 500)
}
render() {
return (
<div>
<h1>当前求和为： {store.getState()}</h1>
<select ref={c => this.selectNumber = c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<button onClick={this.incrementOdd}>当前求和为奇数加</button>
<button onClick={this.incrementAsync}>异步加</button>
</div>
);
}
}
export default Count;
异步action版
npm install --save redux-thunk （需安装使用异步中间件）
在store.js中修该
import {createStore, applyMiddleware} from "redux";
// 引入redux-thunk,用于支持异步action
import thunk from "redux-thunk";
// applyMiddleware使用中间件
export default createStore(count_reducer, applyMiddleware(thunk))
在count_action.js中修改
import {INCREMENT, DECREMENT} from "./constant";
// 同步action： 就是指action的返回值为Object类型的一般对象
export const createIncrementAction = data => ({type: INCREMENT, data})
export const createDecrementAction = data => ({type: DECREMENT, data})
// 异步action： 就是指action的返回值为函数,函数自动接收dispatch
// 异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) => {
return (dispatch)=>{
setTimeout(()=>{
dispatch(createIncrementAction(data))
},time)
}
}
标签：const,type,使用,action,import,redux,data,store 来源： https://www.cnblogs.com/guapitomjoy/p/15223846.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。