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)
标签:dispatch,react,add,connect,使用,import,redux
From: https://www.cnblogs.com/zhumenglong/p/17987537