import React from 'react';
class Counter extends React.Component {
state = {
count: 0
}
increment = () = >{
this.setState({
count: this.state.count + 1
});
}
decrement = () = >{
this.setState({
count: this.state.count - 1
});
}
render() {
return ( < div > <h2 > Counter < /h2>
<div>
<button onClick={this.decrement}>-</button > <span > {
this.state.count
} < /span>
<button onClick={this.increment}>+</button > </div>
</div > )
}
}
export
default Counter;
import React from 'react';
import {
render
}
from 'react-dom';
import Counter from './Counter';
const App = () = >( < div > <Counter / ></div>
);
render(<App / > , document.getElementById('root'));
$ yarn add redux react - redux import React from 'react';
class Counter extends React.Component {
increment = () = >{
// 后面填充
}
decrement = () = >{
// 后面填充
}
render() {
return ( < div > <h2 > Counter < /h2>
<div>
<button onClick={this.decrement}>-</button > <span > {
this.props.count
} < /span>
<button onClick={this.increment}>+</button > </div>
</div > )
}
}
export
default Counter;
import {
connect
}
from 'react-redux';
// 添加这个函数:
function mapStateToProps(state) {
return {
count:
state.count
};
}
// 然后这样替换:
// 默认导出计数器组件;
// 这样导出:
export
default connect(mapStateToProps)(Counter);
import {
Provider
}
from 'react-redux';...const App = () = >( < Provider > <Counter / ></Provider>
);
import { createStore } from 'redux';
const store = createStore();
const App = () => (
<Provider store={store}>
<Counter/ > </Provider>
);
function reducer() {
/ / just gonna leave this blank
for now
// which is the same as `return undefined;`
}
const store = createStore(reducer);
function reducer() {
return {
count: 42
};
}
function reducer(state, action) {
return {
count: 42
};
}
const initialState = {
count: 0
};
function reducer(state = initialState, action) {
return state;
} {
type: "INCREMENT"
} {
type: "DECREMENT"
}
function reducer(state = initialState, action) {
if (action.type === "INCREMENT") {
return {
count: state.count + 1
};
}
return state;
}
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return {
count:
state.count + 1
};
case 'DECREMENT':
return {
count:
state.count - 1
};
default:
return state;
}
}
function brokenReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
// 不,不要这样做,这样正在改变状态
state.count++;
return state;
case 'DECREMENT':
// 不要这样做,这也是在改变状态
state.count--;
return state;
default:
// 这样做是很好的.
return state;
}
}
import React from 'react';
import {
connect
}
from 'react-redux';
class Counter extends React.Component {
increment = () = >{
this.props.dispatch({
type: 'INCREMENT'
});
}
decrement = () = >{
this.props.dispatch({
type: 'DECREMENT'
});
}
render() {
return ( < div > <h2 > Counter < /h2>
<div>
<button onClick={this.decrement}>-</button > <span > {
this.props.count
} < /span>
<button onClick={this.increment}>+</button > </div>
</div > )
}
}
function mapStateToProps(state) {
return {
count: state.count
};
}
export
default connect(mapStateToProps)(Counter);
来源: https://juejin.im/post/5a532e466fb9a01ca9154a98