React-native自学3_状态管理

293 阅读1分钟

redux

安装

yarn add redux react-redux react-navigation-redux-helpers

配置

impore { connect } from 'react-redux'

import {
	createReactNavigationReduxMiddleware,
    createReduxContainer
} from 'react-navigation-redux-helpers'

App.js

import { 
createReduxContainer,
createReactNavigationReduxMiddleware 
} from 'react-navigation-redux-helpers'
import { Provide, connect } from 'react-redux' 
import { createStore, applyMiddleware } from 'redux'

import appStores = 'src/redux'

const AppReduxCOntainer = createReduxContainer(AppContainer) // AppContainer 为包含底部Tabbar 的文件

const middleWare = createReactNavigationReduxMiddleware(state => state.nav)

const mapStateToProps = state => ({
	state: state.nav
})

cost store = createStore(appStores, applyMiddleware(middleWare))
const AppWithNavState = connect(mapStateToProps)(AppReduxCOntainer)

export default class App extends Component {
	render () {
    	return (
        	<Provide store = {store} style = {{{flex: 1}}>
            	<AppWithNavState />
            </Provide>
        )
    }
}

redux.js

import { combineReducers } from 'redux'
import {
	createNavigationReducer
} from 'react-navigation-redux-helpers'

const navReducer = createNavigationReducer(AppContainer)


expore default combineReducers({
	nav: navReducer
})