配置react-redux详解，看完保证会

最新推荐文章于 2025-06-16 15:35:16 发布

原创最新推荐文章于 2025-06-16 15:35:16 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

redux 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在React-Native项目中配置并使用Redux进行状态管理，包括手机端和电脑端的具体步骤。通过实例演示了如何创建action、reducer、store，并将其与组件连接，实现天气信息的获取与展示。

学习网址：https://www.redux.org.cn/docs/basics/Store.html

学习网址https://www.redux.org.cn/

一、初级简单版（亲测有用）手机端配置react-redux

在react native项目中简单实现一个小demo

需要用到的某个文件：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import { getWeather } from "../action/weatherAction";
import { connect } from "react-redux";
class WeatherInfo extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: null,
            header: null,
        }
    };
    componentDidMount(){
        const { getWeather } = this.props;
        const name = "上海"
        getWeather(name);
    }
    render() {
        return (
            <View>
                <Text>WeatherInfo</Text>
            </View>
        );
    }
}
const mapStateToProp = state => ({
    weatherList: state.weatherListStore.weatherList
  });
  const mapDispatchToProp = dispatch => ({
    getWeather: (name) => dispatch(getWeather(name))
  });
  export default connect(
    mapStateToProp,
    mapDispatchToProp
  )(WeatherInfo);

types.js

export const WEATHER_LIST = "weather_list";

weatherReducer.js

import * as TYPES from "../types/types";
const initialState = {
    weatherList: []
};

export default function weatherList(state = initialState, action) {
  switch (action.type) {
    case TYPES.WEATHER_LIST:
      return {
        ...state,
        weatherList: action.text
      };
    default:
      return state;
  }
}

reducers.js

import weatherReducer from "./weatherReducer";
import {combineReducers} from 'redux';
export default combineReducers({
    weatherListStore: weatherReducer
});

weatherAction.js

import * as TYPES from "../types/types";
export function getWeather(name){
    return dispatch => {
        return fetch("https://free-api.heweather.com/v5/weather?key=19713447578c4afe8c12a351d46ea922&city="+name)
        .then((response)=>{
            if(response.ok){
                return response.json();
            }
        })
        .then((jsonData)=>{
            console.log('jsonData',jsonData.HeWeather5[0])
            dispatch(changeWeather(jsonData.HeWeather5[0]));
        }).done
    };
}
export function changeWeather(weatherList) {
  return {
    type: TYPES.WEATHER_LIST,
    text: weatherList
  };
}

route.js（放置导航配置）

import { createStackNavigator, createAppContainer } from "react-navigation";
import React from 'react';
// 引入页面组件
import WeatherScreen from '../pages/WeatherScreen'
import CityScreen from '../pages/CityScreen'
// 配置路由
const AppNavigator = createStackNavigator({
    WeatherScreen: WeatherScreen,
    CityScreen: CityScreen
}
,{initialRouteName:'WeatherScreen'});
const Route = createAppContainer(AppNavigator);
export default Route;

./src/store/index.js

import {createStore, applyMiddleware} from 'redux';
import reducers from '../reducers/reducers';
import thunk from 'redux-thunk'
let createAppStore = applyMiddleware(thunk)(createStore);
export default function configureStore(initialState) {
    const store = createAppStore(reducers, initialState);
    return store;
}

App.js

import React, { Component } from 'react';
import Route from './src/config/route'
import {Provider} from 'react-redux';
import configureStore from './src/store';
const store = configureStore();
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Route />
      </Provider>
    );
  }
}
export default App

遇到的问题

npm install
npm install react-redux --save
npm install redux --save
npm start
react-native run-ios

具体应用可以参考：https://blog.youkuaiyun.com/qq_37815596/article/details/88369247

二、电脑端配置react-redux

三、使用redux

实际例子查看网址：https://mp.youkuaiyun.com/console/editor/html/109223201