Redux总结

---

首先没有使用Redux的时候，我们的程序是这样写的。 对于需要改变的数据，我们需要使用state,代码如下:

export default class App extends Component {
  //定义了state的对象格式 通过setState方法来渲染界面
  state = { input: "" }
  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.text} value={this.state.input}
          placeholder='请输入你的内容' onChangeText={(text) => this.setState({input:text})}/>
        <Text style={styles.text}> 输入的内容:{this.state.input } </Text>
      </View>
    );
  }
}

那如果使用 redux要怎么做呢？

Redux是什么？传送门

首先了解Redux是JS库，增加了 store、action、reducer 的概念，规范了全局一个 state，从而只需要根据这个 state 就能回朔出整个应用的状态。组件通过 dispatch 将 action 传到 store，reducer 根据原来的 state 以及 action，返回新的 state，组件根据新的 state 渲染界面。

原来的state是存储在组件类内部，现在由Redux统一管理，存放在stone里面，改变他的唯一方法就是发送action。Redux接收到action后，会交给对应的reducer去处理。

action是JS对象，按照约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。

action约定

{
  type: '添加action',
  error: ' ',
  payload:' '
}
//或者通过函数的方式返回一个action
export const reduceActionCreate = (text) => {
    return {
        type: '减少action',
        payload:{  
            text:'  '
        }
    }
}

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的， actions 只是描述了事情来了，谁来处理事情呢？当然就是咱们的Reducers。
处理完事情难道就白干了，肯定得有所返回？首先咱们得先设计State的格式。如上面代码
const defaultState = { input: "" , other:' 123 '}
reducer 不神秘，其实就是一个纯函数，接收旧的 state 和 action，返回新的 state。
(previousState, action) => newState

  //开始的时候 previousState为undefined状态，所有要加个初始值
  function handlerReducers(previousState = defaultState , action) => {
    switch (action.type) {
      case '添加action':
        //复写上一状态的input属性
        return {...previousState,input:action.payload}
      case '减少action':
        return {...previousState,input:action.payload}
      default:
        return state
    }
  }

当然每个 reducer只能管理自己的数据处理，如果有多个场景需要多个reducer，那要这么做呢？

import { combineReducers } from 'redux'
//aaaa，bbbb两个reducer，通过combineReducers函数 创建多Reducer的对象
const todoApp = combineReducers({
   AA: aaaa,
   BB: bbbb
})

export default todoApp 

Store其实就是处理容器，Reducer要处理action必须在我这做，怎么做呢？首先咱们得先创建store
let store = createStore( 咱们的Reducers )
然后发送处理action
store.dispatch(要处理的action)

到这里咱们基本了解了Redux的使用方法，但是如何在我们的react项目使用呢？

这里需要再强调一下：Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript

既然没有关系，怎么样让他建立关系呢？传送门
下面咱们简单叙述下如何在我们的项目中配置Redux~~~

1. 安装 redux react-redux(rn和redux之间交互的一个库)
   npm install --save redux react-redux
2. 在app.js的控件的根路径上，Provider组件去包裹。需要设置store属性，通过createStore函数来创建。

import { Provider} from "react-redux";
render() {
    return (
      <Provider store={createStore(reducers)}>
        <MainScreen/>
      </Provider>
    );
  }

//reducers的代码
import { combineReducers } from "redux";

const defaultStatus = { input: '' ,other:'123'}

export default combineReducers({
    nullReducer: inputProcess
})

function inputProcess(pStatus = defaultStatus,action) {
    switch (action.type) {
        case 'aaa':
            return {...pStatus,input:action.payload}
        default:
            return pStatus;
    }
}

3. 然后咱们要把redux和react建立联系。咱们需要用到connect的函数
   import { connect } from "react-redux";
   connect函数需要两个参数mapStateToProps(state)，mapDispatchToProps(dispatch),从方法名可以看出通过映射的方式将redux和react建立联系。mapStateToProps是将 reducers里面的state映射成控件里面的prop调用，mapDispatchToProps是将原先需要dispatch(action)的函数映射成props里的函数调用。如下:

//将state 映射为 this.props.inputProps
function mapStateToProps(state){
   return {
     inputProps: state.nullReducer
   }
}

//想在组件访问state数据
this.props.inputProps.****

//将需要Dispatch(Action)映射到props 下面例子将changeText函数映射changeTextActions
function mapDispatchToProps(dispatch) {
  return {
    changeTextActions: bindActionCreators(changeText, dispatch),
  };
}

//下面在想调用changeText方法，就调用prop里面changeTextActions函数
this.props.changeTextActions(text)

想了解bindActionCreators() 点击这里

//connect(**,**)方法返回也是个函数wrapWithConnect(组件)
connect(mapStateToProps,mapDispatchToProps)(MainScreen); 

//当然也可以简洁的写法 
export default connect((state)=>{ return { inputProps:state.nullReducer } },{changeTextActions})(MainScreen);

到这里就完成redux的配置和代码修改。效果和文章开头的效果差不多，但是代码多了很多。