react-native 学习笔记

环境搭建：详情见官网

node、react-native-cli、python2、JDK1.8、AndroidStudio

一、准备工作 选择性安装组件

• redux：统一状态管理
• react-redux：提供provide、connect API，绑定react组件获取store
• redux-devtools：redux开发者工具，支持热加载、action重放、自定义UI等
• redux-thunk：实现action异步获取数据的middleware
• redux-persist：支持store本地持久化
• redux-observable：实现可取消的action

二、redux 介绍

Redux的概念：把整个应用看成一个component，共享一个store，所有页面都可以拿到store中的内容。当this.store中的state改变的时候，所有关联的页面就会刷新。这样，不用写global，不用写通知。就可以跨页面共享一个状态。所有redux中的状态都是可以全局拿到的。

如：<SubComponent someProps={this.state.someState} />改变state来改变子控件UI的做法。所有用到rudux的页面都是他的子控件。改变state，子页面就都会跟着变。

• subscribe：订阅事件
• state：状态值
• action：view改变store的唯一方式，store.dispatch(action)
• reducer：纯函数，接受参数state, action 返回newState

三、react-redux 介绍

• provider：包裹根组件，使所有子孙组件能通过connect高阶函数绑定store

  class Index extends Component {
      render() {
          return {
              <Provider store={store}>
                  <RootComponent/>
              </Provider>
      	}
      }
  }
  

• connect：高阶函数，接受参数(mapStateToProps,mapDispatchToProps)(component，通过mapstatetoprops,mapdispacter参数获取newState,并返回一个接受组件的高阶函数，

  最终返回一个绑定store的Connect组件

四、使用redux

Redux的流程：
store.dispatch(action) -> reducer处理action，返回一个新的state ->Store更新state ->相关UI更新

• 创建action

  /**
   * action 类型
   */
   const ADD_TODO = 'ADD_TODO'
   
   /**
    * action 创建函数
    */
    export function addTodo(text) {
        return {
            type: ADD_TODO,
            result: text
        }
    }
  

• 创建reducer

  export function reducerAdd (state, aciton) {
      switch(aciton.type) {
          // 返回即将改变的state,由store自己替换state的值
          case 'ADD_TODO' : return {...state, result: action.result}; 
          default: return state
       }
  }
  

• 使用combineReducers

  • reducers/todos.js

    export default function todos(state = [], action) {
      switch (action.type) {
      case 'ADD_TODO':
        return state.concat([action.text])
      default:
        return state
      }
    }
    

  • reducers/counter.js

    export default function counter(state = 0, action) {
      switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
      }
    }
    

  • reducers/index.js

    import { combineReducers } from 'redux'
    import todos from './todos'
    import counter from './counter'
    
    export default combineReducers({
      todos,
      counter
    })
    

  • App.js

    import { createStore } from 'redux'
    import reducer from './reducers/index'
    
    let store = createStore(reducer)
    console.log(store.getState())
    // {
    //   counter: 0,
    //   todos: []
    // }
    
    store.dispatch({
      type: 'ADD_TODO',
      text: 'Use Redux'
    })
    console.log(store.getState())
    // {
    //   counter: 0,
    //   todos: [ 'Use Redux' ]
    // }
    

• 使用action

  // 例子
  class Page extends React.Component {
    login = ()=>{
      //分发Action
      this.props.dispatch({type: 'INCREMENT'})
    }
    render(
      <View>
        <Text>{this.props.counter}</Text>
      </View>
    )
  }
  const mapStateToProps = state => {
      return {
          counter: state.counter,
      };
  };
  //关联页面和用到的模块,store就会把子模块的State通过props传递给此页面
  export default connect(mapStateToProps)(Page);
  

• redux-thunk

  允许action创建函数返回一个异步函数

  • 使用thunk

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  // 创建store的时候，第二个参数是中间件，redux-thunk提供了一个thunk中间件，用于处理异步的action
  export default createStore(
    rootReducer,
    applyMiddleware(thunk)
  );
  
  

  • 使用场景

  //同步action
  export const initAction = (data) => ({
  	type: 'INIT_DATA',
  	data
  })
  
  //异步action
  export const getDataAction = () => {
      //这个方法有一个dispatch的参数，这个dispatch就是store里的dispatch.
      return (dispatch) => {
          axios.get('path').then((res) => {
          	let data = res.data
              dispatch(initAction(data))
          })
      }
  }
  
  //组件中
  componentDidMount () {
      const action = getDataAction();
      store.dispatch(action);  
  }
  
  

• redux-saga

• redux-actions

• redux-promise