Redux示例2-代码

1.利用react官网上的脚手架create-react-app来建立项目，看看项目目录

image.png

2.代码
2.1. Counter.js
import React, { Component } from 'react';

class Counter extends Component {
render() {
const { value, onIncrement, onDecrement } = this.props
return (
<div>
<p>
Clicked: <span>{value}</span> times
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</p>
</div>
)
}
}

export default Counter;

2.2.counter.js
let counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}

export default counter;

2.3.index.js
import React from 'react';
import ReactDOM from 'react-dom';

import { createStore } from 'redux';

import './index.css';
import Counter from './components/Counter';
import counter from './reducers/counter';

const store = createStore(counter)

const render = () => ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={()=>{
store.dispatch({ type: 'INCREMENT' })
}}
onDecrement={()=>{
store.dispatch({ type: 'DECREMENT' })
}}
/>,
document.getElementById('root')
);

render()
store.subscribe(render)