首先,创建一个新项目。
react-native init YCool
我们找到入口文件index.ios.js,将下面代码替换进去。
import React, { Component } from 'react';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers, compose} from 'redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './app/reducers'
import AppContainer from './app/containers/AppContainer'
function configureStore(initialState) {
const enhancer = compose(
applyMiddleware(
thunkMiddleware,
),
);
return createStore(reducer, initialState, enhancer);
}
const store = configureStore({});
import {
AppRegistry,
} from 'react-native';
const App = () => (
<Provider store={store}>
<AppContainer />
</Provider>
)
AppRegistry.registerComponent('YCool', () => App);
从下往上理解这段代码,AppRegistry模块是React Native应用JavaScript运行的入口。应用跟组件应用使用AppRegistry.registerComponent进行注册自己。然后原生系统就可以进行加载运行bundle文件包,最后就会可以调用AppRegistry.runApplication进行运行起来应用。
指向了APP,先来了解一下<Provider>,<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。
在看一下store这个属性值,它指向了一个函数,这个函数返回了一个redux组件里的函数createStore()。顾名思义,它就是用来创建Store的。而Store又是做什么的呢?
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
这个时候我就理解了,首先我们先创建一个Store用来保存数据,然后再将它赋给<Provider>。