redux 基本操作

今天主要使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)

• App.js

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

• index.redux.js

//创建常量
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的使用你就基本掌握了下面让我们来更进一步吧

还是上面的三个组件 稍稍的改造一下吧

• index.js

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)

• App.js

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

• index.redux.js

//创建常量
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);
    }
}