// redux/index.js
const ADD = 'add';
const SUB = 'sub';
export function counter(state = 0, action) {
switch(action.type) {
case ADD:
return state + 1;
case SUB:
return state - 1;
default:
return state;
}
}
// action
export function add() {
return {type: ADD};
}
// action
export function sub() {
return {type: SUB};
}
// index.js 入口
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import {counter} from './redux/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
let store = createStore(counter);
// 通过props传递store
ReactDOM.render(
<Provider store={store}>
<div>
<App />
</div>
</Provider>
,
document.getElementById('root')
);
// App.js
import react from 'react'
import {connect} from 'react-redux'
import {add, sub} from './reduxs/index'
class App extends react.Component {
render() {
return (
<div>
<span>{this.props.num}</span>
<button onClick={this.props.add}>add</button>
<button onClick={this.props.sub}>sub</button>
</div>
);
}
}
const MapStateToProps = (state) => {
return {num};
}
const ActionCreator = {add, sub};
App = connect(MapStateToProps, ActionCreator)(App);
配置babel
package.json里面找到babel,增加插件transform-decorators-legacy
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-decorators-legacy"
]
}
npm install --save babel-plugin-transform-decorators-legacy
// 直接替换上面的connect方法
@connect((state)=> {return {num: state}}, {add, sub})
import {combineReducers} from 'redux'
import {counter} from './redux/index'
const todoApp = combineReducers({
counter
})
export default todoApp
// index.js
import reducers from './reducer'
// 解决异步等待
import thunk from 'redux-thunk'
import {createStore, applyMiddleware, compose} from 'redux';
// 开启redux调试功能
const reduxDevTools = window.devToolsExtension ? window.devToolsExtension() : ()=>{};
const store = createStore(reducers, compose(
applyMiddleware(thunk), // 使用中间件thunk
reduxDevTools // 配置调试
));