首先就要安装,
yarn add react-redux
react-redux 只是一个辅助工具,只是将react和redux进行更好的连接的桥梁工具,是帮助我们连接store和组件的桥梁,
所以,在入口文件引入一个工具从react-redux
import { Provider } from 'react-redux'
然后引入store 绑定在Provider身上
我们知道store的作用有俩个,一个是存储数据,一个是通过subscribe 进行视图的更新,我们把store绑定在Provider身上后,就可以通过con’text.Provier进行跨组件通信,将provider身上绑定的store(所有的数据)传递下去,然后将他身上的属性给容器组件,容器组件帮助我们获取数据,更新视图,然后给ui
ReactDOM.render(
<Provider store = { store }>
<App />
</Provider>
, document.getElementById('root'));
我们以一个数据请求为案例
- 我们不能把异步动作放到组件中,因为UI组件只负责使用数据,如果有其他的异步代码,让UI组件组件不纯粹
- 理论上来说放到actionCreator的方法中最合适,但是,因为actionCreator目前只是专注于创建action和返回action,无法放入异步操作
所以,我们需要用到redux的中间件工具:redux-thunk、redux-promise、redux-saga…
//redux-thunk,可以帮助我们异步操作,进项数据请求
在这里我们研究一下redux-thunk,他是一个中间件,(中间件是具有一定功能的函数,我们需要在redux中导入applyMiddleware来使用这个中间件)
import { createStore ,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
redux-
import reducer from './reducer'
**const store = createStore(reducer,applyMiddleware(thunk))**
export default store
在store中使用了redux-thunk之后,
它的使用方法及其简单:
1. 安装redux-thunk:cnpm iredux-thunk -S
-
在创建store的时候使用中间件
import { createStore, applyMiddleware } from ‘redux’
import thunk from ‘redux-thunk’
import reducer from ‘./reducer’
const store = createStore(reducer, applyMiddleware(thunk) )
-
这个时候,actionCreator的方法就可以返回一个能接收到dispatch的一个函数,我们可以在这个函数中进行异步操作之后,将actionCreator创建好的action给发送