如何使用redux

redux 使用在reactnative基本是没有变化的 

开发中常用的 异步 工程中用到了 redux-thunk

具体实现上代码 stroe.js

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function configureStore(initialState) {
    const store = createStoreWithMiddleware(rootReducer, initialState);
    return store;
}

　

getList.js

import * as ActionType from '../../actionType'


const initialState = {
    list:[]
}

export default function getNubmer(state = initialState, action) {
    switch (action.type) {
        case ActionType.ACTION_ADDS:
            return { list: action.list }
        default:
            return state;
    }

}

　　

　

reducers.js

import { combineReducers } from 'redux';
import getNubmer from './getNubmer';

import getSales from './getSales';
import getList from './getList';
//这里面必须要有初始数据 - 否则报错
const rootReducer = combineReducers({
    //GetWeatherReducer : GetWeatherReducer,
    getSales,
    getNubmer,
    getList
});


export default rootReducer;

　　

App.js

import React ,{ Component  } from 'react';
import { PixelRatio, Dimensions } from 'react-native';
import { createAppContainer, StackActions, NavigationActions} from 'react-navigation';
import AppNavigator from './views/nav'
import BottomNavigator from './views/tababr'
import {Provider} from 'react-redux'
import configureStore from './store'
let store = configureStore();

const dp2px = dp => PixelRatio.getPixelSizeForLayoutSize(dp);
const px2dp = px => PixelRatio.roundToNearestPixel(px);

let pxRatio = PixelRatio.get();
let { win_width, win_height } = Dimensions.get("window");

let scale = 1 / pxRatio;
let width = dp2px(win_width);
let height = dp2px(win_height);

const App = createAppContainer(BottomNavigator);
class APP extends Component{

    render(h) {
        return (
            <Provider store={store}>
                <App  />
            </Provider>
        )
    }
} 
export default APP

　　场景使用

action.js

import * as actionType from '../actionType/index';
import https from '../../common/https'

export const receiveTodos = (type,list) => ({
    type,
    list
});

export const fetchTodos = () =>{

  return  dispatch => {
        https.getDateJson(https.getBannerList, {}).then(todos => {
            dispatch(receiveTodos(actionType.ACTION_ADDS,todos.bizVO.list))
        })
    }
}

　　

 

 

import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';
import { connect } from 'react-redux'

import {fetchTodos} from '../../store/action/getHome'
import Swpper from '../../common/swiperItem'
import * as actionType from '../../store/actionType'
// console.log(fetchTodos());

const mapStateToProps = (state) => {
   
    return {
        todos: state.getList.list
    }
}

const mapDispatchToProps = (
    dispatch,
    ownProps
) => {
    return {
        onIncreaseClick: () => {
            // dispatch({
            //     type: actionTpye.ACTION_ADDS
            // });
             fetchTodos()(dispatch);
        }
    };
}


class Home extends Component {
    
    componentDidMount(){
        const { onIncreaseClick} = this.props;
        onIncreaseClick();
    }

    render() {
        const { todos, onIncreaseClick} = this.props
        return (
            <View>
                <Swpper listDate={todos} />
                <Text>这是第三个页面</Text>
            </View>
        );
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)