react-redux 的使用（一）

react-redux 的使用（一）

其实它的使用还是离不开 redux

它分为两部分，UI 组件和容器组件（注意，原有的store文件内容不改变，并且在APP.js渲染的是容器组件）

此时产生了一个大改变，就是在页面不再通过store获取数据，而是this.props.xxx

容器文件代码如下：

import {connect} from 'react-redux'
import HelloUI from '../../componenet/hello'
export default connect(state => ({
    number: state // 届时 props 属性上会多出一个 number 属性
}), dispatch => ({
    add: data => dispatch({ type: 'add', data }) // 届时 props 属性上会多出一个 add 方法
}))(HelloUI)

App.js文件代码如下

import Hello from "./container/hello";
import {store} from './store'

function App() {
  return (
    <div className="App">
        <Hello store={store} />
    </div>
  );
}

export default App;

在页面显示或调用方法用this.props.xxx就行

进阶

异步写法如下：

import {connect} from 'react-redux'
import HelloUI from '../../componenet/hello'
export default connect(state => ({
    number: state
}), dispatch => ({
    // 其实还和以前异步一样的写法，只不过挪到这里来了
    add: data => dispatch((dispatch, getState, extraArgument) => {
        setTimeout(() => {
            dispatch({ type: 'add', data})
        }, 2000)
    })
}))(HelloUI)