React RN 状态管理之 redux

一切可以不用redux做到的就不要用redux！

redux 比较重直接开启过程

依赖

yarn add react-redux@7.2.6

yarn add redux@4.1.2

yarn add redux-thunk@2.4.1

1.创建store 分配 reducer 创建store文件夹 下创建store.js

import {createStore,applyMiddleware,combineReducers} from 'redux'
// 引入thunk 中间件 store 支持异步action
import thunk from 'redux-thunk'

import countReducer from './reducers/count'

const allReducer = combineReducers({
    countReducer,
})

export default createStore(allReducer,applyMiddleware(thunk));

 

2.创建reducer store文件夹下创建reducers文件夹 用来存放多个reducer 例如count

import {ADD,REMOVE} from '../stants';

const count = (preState = 0,action)=>{
    let {type,data} = action
    switch (type){
        case ADD:
            return preState+data;
        case REMOVE:
            return preState-data;
        default:
            return preState;
    }
}

export default count;

 3.创建actions 文件夹  并创建多个action 分配处理方法

import {ADD,REMOVE} from '../stants';

export const add = data => ({type:ADD,data});

export const remove = data =>({type:REMOVE,data});

// 异步处理方法
export const asyncAdd = (data,time) =>{
    return (dispatch)=>{
        setTimeout(() => {
            dispatch(add(data))
        }, time);
    }
}

4.创建 stants.js 管理reducer与action之前变量方便管理

export const ADD = 'add'
export const REMOVE = 'remove'

5.项目入口处引入store挂载

import {Provider as ReduxProvider} from 'react-redux';
import store from './src/store/store';

 

<ReduxProvider store={store}>
    <App />
</ReduxProvider>

6.页面中使用 

connect 是个高阶函数第一个括号接收两个参数

第一个参数是个函数 函数中参数将接收到所有reducer需要共享的数据

第二个参数是action驱动reducer执行的方法

函数的props中将携带共享的数据和驱动方法

connect第二个括号传入当前的页面

import {connect} from 'react-redux';
import * as countAction from '../../store/actions/count'

const Mine = (props) => {
    let {count} = props

    const add = ()=>{
        props.add(1)
    }
    return (
        <View>
            <Text>circle-{count}</Text>
            <Button onPress={()=>add()}>新增</Button>
        </View>
    );
};

export default connect(
    (state)=>({count:state.countReducer})
    ,{...countAction})
(Mine);