react-redux

让redux在react项目中可以更简单的调用！

Provider：把store注册到上下文中

JavaScript

import store from './store';
import { Provider } from 'react-redux';

root.render(
  <Provider store={store}>
    <Vote />
  </Provider>
);

1
2
3
4
5
6
7
8

connect：把公共状态和派发任务当做属性传递给属性

自动获取上下文中的store
自动把“让组件更新的方法”注册到store事件池中
mapStateToProps
mapDispatchToProps

JavaScript

import { connect } from 'react-redux';
const Vote = function Vote(props) {
    let { supNum, oppNum } = props;
    return <div className="vote-box">
        ...
    </div>;
};
export default connect(
    state => {
        return state.vote;
    }
)(Vote);

1
2
3
4
5
6
7
8
9
10
11
12

JavaScript

import actions from '@/store/actions';
import { connect } from 'react-redux';
const VoteFooter = function VoteFooter(props) {
    let { support, oppose } = props;
    return <div className="footer">
        <button onClick={support}>支持</button>
        <button onClick={oppose}>反对</button>
    </div>;
};
export default connect(
    null,
    dispatch => {
        return {
            support() {
                dispatch(actions.vote.support(10));
            },
            oppose() {
                dispatch(actions.vote.oppose());
            }
        }
    }
)(VoteFooter);

// 或者
<button onClick={support.bind(null, 10)}>支持</button>
export default connect(
    null,
    actions.vote
)(VoteFooter);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

react-redux #

react-redux