首先说明搭建redux需要的插件
react-redux
redux
安装了必要的插件之后进行文件配置 需要搭建的文件如下
src
actions
| index.js 用于汇总
| counter.js
reducers
| index.js 用于汇总
| redux.js
需要进行更改的文件 及具体更改内容
src文件下的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) <------------- 这个是你的类名
持续更新....