redux与react的结合使用例子

    看了很多的博客，一直没有搞明白redux到底是如何使用，今天通过一个简单的例子 描述redux与react如何结合使用

1、新建index.redux.js

const ADD = 'add'               //将操作方式定义为一个常量
const SUB = 'sub'               //同上
//reducer
export function counter(state=0, action) {
    switch(action.type){
        case ADD:
            return state+1      
        case SUB:
            return state-1      
        default:
            return 10           
    }
}
//action creator
export function addFun() {
    return {type:ADD}
}
export function subFun() {
    return {type:SUB}
}

 

2、index.js

 

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { counter } from './index.redux'
import App from './App'

const store = createStore(counter)


function render() {
    ReactDOM.render(, document.getElementById('root'))
}
render()
store.subscribe(render)

在index.js中引入

import { createStore } from 'redux'
import { counter } from './index.redux'

通过createrStore（counter）获取到我们定义的state，并传入到App组件中去，使我们能够在子组件中获取到state

我们将ReactDOM.render()渲染函数封装在一个函数中，通过store.subscribe()来订阅监听state值的变化，只要state值发生变化

就会触发该函数，到达实时更新

3、App.js

import React, { Component } from 'react'
import { addFun, subFun } from "./index.redux"

class App extends Component {
  render() {
        const store = this.props.store
        const num = store.getState()
        return (
            

                store.dispatch(addFun())}>加
                store.dispatch(subFun())}>减
                
当前数值{num}
            
        );
  }
}

export default App;

先导入addFun 和 subFun两个函数，这两个函数中分别返回我们对应的操作方式：加和减

然后我们可以通过父组件向子组件传值的获取方法来得到state   this.props.state  和普通传值无异

在通过两个按钮来触发加和减的操作  通过触发dispatch{}来提交state的操作类型

在这里store.dispatch(addFun())==store.dispatch({type:ADD})

store.dispatch(subFun())==store.dispatch({type:SUB})

然后再通过store.getState()获取到state的值，并显示出来。

4、最终结果就是可以通过加减两个按钮来操作数值的加1和减1操作