reactnative - 15. Redux 重量级组件状态存储组件

  https://moduscreate.com/blog/react-navigation-redux-in-react-native-applications/  （StackNavigator中使用）

1. 安装第三方包

npm install redux react-redux --save

2. 增加首页入口，路由。 

修改 Home.js,   App.js  ，过程略。 

3. 增加骨架文件：screens/ReduxDemo.js

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'


export default class ReduxDemo extends Component{
  constructor(props){
    super(props)
  }

  render(){
    return(
      <View>
        <Text>本例子演示Redux在React Native中的使用： 保存数据和状态。 {"\n"}
        1. 点击之后，计数器 + 1 {"\n"}
        2. 点击之后，5秒内 按钮不可点击 。
        </Text>
        <Button
          title="点击计数！"
          onPress={ () => {
              // do nothing
          }}
          />
      </View>
    )
  }
}

  然后，分别建立：  reducer,   =>  store  => connect 

建立reducer: 

新建文件夹： redux_demo, 然后在其中:

1. 新建 types.js

export const INCREASE_COUNT = 'INCREASE_COUNT'

2. 新建 action creator.js: 

import { INCREASE_COUNT } from './types'

export const increaseCount = (para) => {

  // type 参数是必须有的,  其他的可以自行填写。这里就是一个 填参数的过程。
  return {
    type: INCREASE_COUNT
  }
}

3. 新建 reducers.js

import { INCREASE_COUNT} from './types'

const initialState = {
  count: 0
  // isClickable: true
}

const countReducer = (state = initialState, action ) => {
  switch(action.type) {
    case INCREASE_COUNT:
      console.info("== count: ", state.count)
      return {
        // ...state,
        count: state.count + 1  // 我们只关心这一个就好了。
      }
    default:
      return state
  }
}

export default countReducer

4. 建立store.js 

import {createStore, combineReducers} from 'redux'
import countReducer from './reducers'

const rootReducer = combineReducers({
  countReducer: countReducer
})

const configureStore = () => {
  return createStore(rootReducer)
}

export default configureStore

5. 修改 入口文件  index.js

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

// 以下为 为调用Redux 而新增的代码
// 这句话虽然没有被显示调用，但是不加会报错， 在 const myProvider那里。
import React from 'react'
import configureStore from './redux_demo/store'
import { Provider } from 'react-redux'
const store = configureStore()
const myProvider = () => {

  // 这里要记得使用 return , 否则会报错：
  // 网上这个例子是错的：
  // 参考：https://stackoverflow.com/questions/49075731/invariant-violation-app-nothing-was-returned-from-render-this-usually-me?rq=1
  return(
    <Provider store = {store} >
      <App />
    </Provider>
  )
}

AppRegistry.registerComponent(appName, () => myProvider);

6. 修改 对应的页面文件： ReduxDemo.js

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'

// 1. 导入相关的文件
import {connect } from 'react-redux'
import {increaseCount} from '../redux_demo/action_creators'

class ReduxDemo extends Component{

  // 4. 定义被触发的事件。
  clickButton = () => {
    // 4.1 该方法来自于下面的 mapDispatchToProps
    // 在 6.2 步骤中
    this.props.increaseCountByOne()
  }

  render(){
    return(
      <View>
        <Text>本例子演示Redux在React Native中的使用： 保存数据和状态。 {"\n"}
        1. 点击之后，计数器 + 1 {"\n"}

        </Text>
        { /* 3. 在 View中增加对应的事件。 */}
        <Button
          title="点击计数！"
          onPress={this.clickButton}
          />
        <Text>
          您点击了：{this.props.count}  {"\n"} （请使用 根目录下的 "AppWithRedux.js "进入到本页面。 否则页面看不到效果。（只能在console 中看到效果) ）
        </Text>
      </View>
    )
  }
}

// 5. 把state 映射到 props中。
const mapStateToProps = state => {
  return {
    // 5.1 务必注意，这里是 store.countReducer.count  不是 state.count
    // 没有为什么，把他背下来。
    count: state.countReducer.count
  }
}
// 6. 把 dispatch 映射到 props中
const mapDispatchToProps = dispatch => {
  return {
    // 6.1 定义了一个方法，该方法会在 Component中被调用
    increaseCountByOne: () => {
      // 6.2 increaseCount() 方法来自于 action_creators.js中定义的
      dispatch(increaseCount())
    }
  }
}

// 7. 让上面两个映射生效。  废代码，没意义，但是没它不行。 就得这样写。
export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo)

这个时候，就可以在Android console 中看到效果了。 （数据已经被保存）

12-29 16:52:46.418 2502-3671/com.hello I/ReactNativeJS: '== count: ', 0
12-29 16:52:47.079 2502-3671/com.hello I/ReactNativeJS: '== count: ', 1
12-29 16:52:47.273 2502-3671/com.hello I/ReactNativeJS: '== count: ', 2
12-29 16:52:47.418 2502-3671/com.hello I/ReactNativeJS: '== count: ', 3
12-29 16:52:47.584 2502-3671/com.hello I/ReactNativeJS: '== count: ', 4
12-29 16:52:47.715 2502-3671/com.hello I/ReactNativeJS: '== count: ', 5

在页面上也 可以看到，每点击一下， 数字就+1