react redux使用 基础搭建过程

首先说明搭建redux需要的插件

react-redux

redux

 

安装了必要的插件之后进行文件配置 需要搭建的文件如下

src

actions

　|　index.js　　　　用于汇总

　|　counter.js　　　

reducers

　|　index.js　　　　用于汇总

　|　redux.js

 

 

需要进行更改的文件 及具体更改内容

 

根文件文件下的index.js

引入

import { Provider } from 'react-redux';

import { createStore } from 'redux'

import rootReducer from './reducers'  这个就是你那个文件夹

创建库

const store = createStore(rootReducer)  把你的整个文件夹拉过来建立一个库

更改class render里面的内容

<Provider store={store}>   用Provider包裹住App/这个组件   并且把store传过去

      <div><App/></div>

</Provider>

底下不要忘了改这个组件名

ReactDOM.render(<Hello />, document.getElementById('root'));

 

action文件下 非index.js文件

这个文件是用来传递你想要触发对应的redux里面的方法

export function xxxxx(){

    return {

        type: 'XXXXX'

    }

}

这个用一个抛出一个 建立一个抛出一个

汇总到index,js文件内 index,js 文件如下

import * as counterCreator from './counter'　　全部接收

export {

    counterCreator　　抛出

}

这么做是因为考虑到多人开发的时候可能会产生多个文件 这么做方便合并

 

redcers文件下的非 index,js 文件

const initialState = {

    num: 0

}

export default (state = initialState ,action) =>{

    switch (action.type) {

        case "ACTION" :

            return {

                ...state,

                num:state.num + 1

            }

        default:

            return state

    }

}

这个应该都能明白  switch  筛选一下 判断进行哪个事件

没啥好说的 我把index.js内容写一下  跟上面的基本一样

import { combineReducers } from 'redux'     只有这里跟上面有些差距

import reduxDom from './reduxDom'

export default combineReducers({

    reduxDom

})

 

好了 我们看一下如何在页面的文件内使用这些方法跟变量

import { counterCreator } from "../../actions";

import { connect } from "react-redux";

 

使用的时候

{this.props.$$num}

 

底部声明

const mapStateToProps = (state) => {

    return {

        $$num: state.reduxDom.num

    }

}

const mapDispatchToProps = (dispatchEvent) => ({

    increment: ()=> dispatchEvent(counterCreator.increment()),

})

 

export default connect(

    mapStateToProps,

    mapDispatchToProps

)(Redux)　　　　<-------------　　　这个是你的类名

 

 

 持续更新....