React Native中使用Redux

记录一下自己学习使用Redux的过程：

通过一个简单的Demo理解什么是Redux。个人觉得Redux最大的优势在于没有任何关联（没有嵌套，没有父子组件关系）的两个页面，可以在任意一个页面操作其他界面的state。

功能很简单，单击“+”或“-”，数值对应的增加或者减少。

单击+或者-时不去直接修改数值对应的state，而是通过dispatch去发送一个action，由Reducer去匹配action对应的type来返回不同的state，达到修改state的效果。这也是redux的基本流程。

代码实现：

1.安装redux：

npm install --save redux
npm install --save react-redux
npm install --save redux-logger
           

2.使用Redux必须在App整体标签外嵌套一层Provider标签并且传入store

首先创建store，新建configStore.js

// redux库里面提供的方法，创建store和middleware中间件
import {createStore,applyMiddleware,compose } from 'redux';
// redux-logger打印logger的中间件，具体效果可以看下图
import {createLogger} from 'redux-logger';
// rootReducer下一步会创建
import RootReducer from '../reducers/RootReducer';

const configureStore = (initialState) => {
    const store = createStore(
        RootReducer,//reducer模块 下面会创建并解释
        initialState,//state初始值
        compose (
            applyMiddleware(createLogger())
        )
    )
    return store;
}
           

在Provide标签中传入store

const App = () => {
  return (
      <Provider store={store}>
          //这是app整体最外层的路由 代码就不贴了
          <AppNavigator /> 
      </Provider>
  );
};
export default App;
           

3.创建action，redux修改state需要通过dispatch传递action给reducer

首先创建actionTypes常量类，action在return时必须包含type，reducer通过action中的type去匹配之后的操作

ActionTypes.js

//我需要两种actiontype，加，减
export const COUNT_ADD = "COUNT_ADD"
export const COUNT_SUB = "COUNT_SUB"
           

然后创建action模块，新建CountAction.js文件

//加          //参数代表传进来的数值 增加减少的数值,也可以无参
export const countAdd = (num) => {
    return {
        type: COUNT_ADD,//上面定义的ActionTypes中的常量
        num:num
    }
}
//减
export const countSub = (num) => {
    return {
        type: COUNT_SUB,
        num:num
    }
}

           

4.创建reducer模块，利用switch case判断action的type，然后返回对应的state，达到修改state的效果

新建Counter.js

export const initialState = {
    des:'测试initialState',//默认state 界面有效果  测试
}

export default function counter(state=initialState,action) {
    switch (action.type) {
        case COUNT_ADD:
            return{
                ...state,
                count:state.count+action.num
            }
            break;
        case COUNT_SUB:
            return{
                ...state,
                count:state.count+action.num
            }
            break;
        default:
            return {
                ...state,
                count:0,
            }
    }
}
           

然后新建RootReducer.js 在第二步创建store时需要

// 取决于这里你加入了多少 reducer
const RootReducer = combineReducers({
    Counter:Counter,//刚刚创建的reducer
});
export default RootReducer;
           

5.到这一步基本的redux就搭建完毕，创建页面实践

class ReduxDemo extends Component {

	//这里不用定义任何state，直接在connect方法中获取全局的state 任何页面的都可以
	constructor(props){
		  super(props)
	}
	  
    render(){
        return(
            <View style={[styles.container,styles.center,{flexDirection:'row'}]}>
                <TouchableOpacity
                    style={{borderWidth:1,width:50,height:50,justifyContent:'center',alignItems: 'center',margin:5}}
                    onPress={()=>{
                        //在进行加减操作时不修改数值对应的state 而是通过dispatch传递action给reducer
                        this.props.dispatch(countAdd(2))
                    }}>
                    <Text>+</Text>
                </TouchableOpacity>
                <Text style={{margin:5}}>数值：{this.props.count}</Text>
                <Text style={{margin:5}}>state：{this.props.des}</Text>
                <TouchableOpacity
                    style={{borderWidth:1,width:50,height:50,justifyContent:'center',alignItems: 'center',margin:5}}
                    onPress={()=>{
                        this.props.dispatch(countSub(-2))
                    }}>
                    <Text>-</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

//在使用redux的页面一定要connect
export default connect(
    (state) => ({
    	//获取全局的state
        des:state.counter.des,
        count:state.counter.count,
    })
)(ReduxDemo)