Redux-003-使用 react-redux

本文视频地址：https://www.qiuzhi99.com/movies/react-redux/150.html

参考链接
https://github.com/reactjs/react-redux
https://github.com/reactjs/react-redux/blob/master/docs/api.md

目录结构

image.png

• actions定义action事件
• constants定义常量
• reducers定义处理的逻辑（传入旧的state和action返回新的state）

代码
index.js

import {createStore} from 'redux';
import reducer from './reducers/counter';
import {increment,decrement} from './actions’;

import {Provider} from 'react-redux’;

const store = createStore(reducer);

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));

App.js
//Store传值的实现
import {connect} from 'react-redux’;

const mapStateToProps = (state) => {
console.log(state);
return {
counter: state
};
};

export default connect(mapStateToProps)(App);

• index.js没有了事件的绑定和触发
• 添加了Provider
• 添加了connect
• 添加了mapStateToProps