今天主要使redux的基本操作（这里不是react-redux）
- 这里主要用代码来叙述 一个小的计数器 通过如下三个组件
App.js 和index.redux.js 和index.js
- index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App'
//导入reducer 和actionCreator
import {counter,add_A,rem_R} from './index.redux.js'
//导入createStore 的方法从redux当中
import { createStore } from 'redux';
//使用createStor(reducer)方法生成store
const store= createStore(counter)
const render=()=>{
//将需要用的参数传入组件内部直接使用即可 参数可以为方法或者值 将actionCreator 传入组件当中使组件更加独立
ReactDom.render(<App store={store} add_A={add_A} rem_R={rem_R}/>,document.getElementById('root'))
}
//生成视图
render()
//订阅store的更新 每当store的内容被dispatch派发之后 subscribe当中的函数就会重新执行一次
store.subscribe(render)
import React from 'react';
class App extends React.Component{
constructor(props){
super()
}
render(){
//接收组件外部传入的值
const store = this.props.store
//获取store中的state的值
const num = store.getState()
//接收组件外部传入的方法
const add_A=this.props.add_A
const rem_R=this.props.rem_R
return (
<div>
<h1>现在是数字几{num}</h1>
{/*这里需要手动store.dispatch（发布）一下才能更新视图*/}
<button onClick={()=>store.dispatch(add_A())}>加</button>
<button onClick={()=>store.dispatch(rem_R())}>减</button>
</div>
)
}
}
export default App
//创建常量
const ADD_N = "加"
const REM_N = "减"
//创建reducer 根据老的state和action 生成新的state
export const counter=(state=0,action)=>{
switch (action.type) {
case ADD_N:
return state+1
case REM_N:
return state-1
default:
return 10
}
}
//action creator
export const add_A=()=>{
return {type:ADD_N}
}
export const rem_R=()=>{
return {type:REM_N}
}
到这里基本的一个redux的使用你就基本掌握了下面让我们来更进一步吧
还是上面的三个组件 稍稍的改造一下吧
import React from 'react';
import ReactDom from 'react-dom';
import App from './App'
//导入reducer 和actionCreator
import {counter,add_A,rem_R,addAsync} from './index.redux.js'
//导入createStore 的方法从redux当中 并且从redux当中导入处理中间件的方法applyMiddleware
import { createStore,applyMiddleware} from 'redux';
//这里导入处理redux的中间件专门处理redux的异步问题 因为本身redux是同步的
import thunk from 'redux-thunk'
//使用createStor(reducer)方法生成store 添加applyMiddleware(thunk)方法来处理thunk中间件来达到处理异步的效果
const store= createStore(counter,applyMiddleware(thunk))
const render=()=>{
//将需要用的参数传入组件内部直接使用即可 参数可以为方法或者值 将actionCreator 传入组件当中使组件更加独立
ReactDom.render(<App store={store} add_A={add_A} rem_R={rem_R} addAsync={addAsync}/>,document.getElementById('root'))
}
//生成视图
render()
//订阅store的更新 每当store的内容被dispatch派发之后 subscribe当中的函数就会重新执行一次
store.subscribe(render)
import React from 'react';
class App extends React.Component{
constructor(props){
super()
}
render(){
//接收组件外部传入的值
const store = this.props.store
//获取store中的state的值
const num = store.getState()
//接收组件外部传入的方法
const add_A=this.props.add_A
const rem_R=this.props.rem_R
const addAsync=this.props.addAsync
return (
<div>
<h1>现在是数字几{num}</h1>
{/*这里需要手动store.dispatch（发布）一下才能更新视图*/}
<button onClick={()=>store.dispatch(add_A())}>加</button>
<button onClick={()=>store.dispatch(rem_R())}>减</button>
{/*这里点击完成之后就会触发异步方法 在两秒之后更新*/}
<button onClick={()=>store.dispatch(addAsync())}>等两秒再加</button>
</div>
)
}
}
export default App
//创建常量
const ADD_N = "加"
const REM_N = "减"
//创建reducer 根据老的state和action 生成新的state
export const counter=(state=0,action)=>{
switch (action.type) {
case ADD_N:
return state+1
case REM_N:
return state-1
default:
return 10
}
}
//action creator
export const add_A=()=>{
return {type:ADD_N}
}
export const rem_R=()=>{
return {type:REM_N}
}
export const addAsync=()=>{
//这里返回的是一个箭头函数 因为只有dispatch一个参数所以省略括号
return dispatch=>{
//这里的方法回两秒之后执行
setTimeout(() => {
//两秒之后执行dispatch发布add_A这个actionCreator
dispatch(add_A())
}, 2000);
}
}
网友评论