React native 使用redux从react native中的API获取数据_React Native_Redux

React native 使用redux从react native中的API获取数据

react-native redux

React native 使用redux从react native中的API获取数据,react-native,redux,React Native,Redux,我正在从事一个react native项目，在该项目中，我试图使用axios库从api获取数据并显示数据。因此，我的应用程序首先显示一个启动屏幕，然后需要导航到一个包含选项卡的页面。选项卡将包含来自api的数据因此，我试图在我的主页中初始化我的商店，它位于启动屏幕之后。我在两个不同的文件中分别定义了我的减速机和操作 App.js文件 import React from 'react'; import { StyleSheet, Text, View } from 'react-native';

我正在从事一个react native项目，在该项目中，我试图使用axios库从api获取数据并显示数据。因此，我的应用程序首先显示一个启动屏幕，然后需要导航到一个包含选项卡的页面。选项卡将包含来自api的数据

因此，我试图在我的主页中初始化我的商店，它位于启动屏幕之后。我在两个不同的文件中分别定义了我的减速机和操作

App.js文件

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import SplashScreen from './src/components/SplashScreen';
import HomeScreen from './src/components/HomeScreen';

const Navigation = StackNavigator({
    Splash: {
      screen: SplashScreen
    },
    Home: {
      screen: HomeScreen
    }
})

export default Navigation;

import axios from 'axios';
export const FETCH_DATA = 'fetch_data';

const API = 'https://api.myjson.com/bins/fz62x';

export function fetchData() {
  const request = axios.get(API);

  return dispatch => {
    return request.then((data) => {
        dispatch({
          type: FETCH_DATA,
          payload: data
        })
    })
  }
}

我的SplashScreen组件：

import React from 'react';
import { StyleSheet,
         Text,
         View,
         } from 'react-native';

export default class SplashScreen extends React.Component {
  static navigationOptions = {
    header: null
  }

  componentWillMount() {
    setTimeout(() => {
      this.props.navigation.navigate('Home')
    },2000)
  }

  render() {
    return(
        <View style={styles.container}>
          <Text style={styles.welcome}>Splash Screen</Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'skyblue'
  },
  welcome: {
    color: '#FFF',
    fontSize: 30
  }
})

我的减速机

import { FETCH_DATA } from './actions';

export default function(state={}, action) {
  switch(action.type) {
    case FETCH_DATA:
      return {
        ...state,
        action.payload
      };

    default:
        return state;
  }
}

请问这是不是正确的方法？如果没有，那么正确的方法是什么？

我想说，没有正确或不正确的方法可以做到这一点。但我可以分享一种我通常使用的模式

首先，我会为不同的文件创建单独的文件夹。操作文件夹中的操作，还原器文件夹中的还原器等。。。我将创建单独的

constants.js

文件和

configureStore.js

文件，并将它们放在项目根目录中

我会删除Axios库，只使用

fetchAPI

获取数据。考虑到您的代码，我将执行以下操作

在项目的根目录中创建

configureStore.js

文件。我建议您使用

Redux-Thunk

。您可以从中找到更多信息

configureStore.js

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

export default function configureStore() {
    let store = createStore(app, applyMiddleware(thunk))
    return store
}

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import configureStore from './configureStore';
import HomeScreen from './screens/HomeScreen';

const NavigationApp = StackNavigator({
    HomeScreen: { screen: HomeScreen }
})

const store = configureStore()

export default class App extends Component {

    render() {
        return (
            <Provider store={store}>
                <NavigationApp />
            </Provider>
        );
    }
}

export const FETCHING_TODOS = 'FETCHING_TODOS';
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getTodos())

        return(fetch('https://api.myjson.com/bins/fz62x'))
        .then(res => res.json())
        .then(json => {

            return(dispatch(getToDosSuccess(json)))
        })
        .catch(err => dispatch(getToDosFailure(err)))
    }
}

function getToDos() {

    return {
        type: FETCHING_TODOS
    }
}

function getToDosSuccess(data) {

    return {
        type: FETCH_TODOS_SUCCESS,
        data
    }
}

function getToDosFailure() {
    return {
        type: FETCH_TODOS_FAILURE
    }
}

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
import axios from 'axios';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getUser())
        axios.get('https://api.myjson.com/bins/fz62x')
            .then(function (response) {

                // handle your response here, create an object/array/array of objects etc... 
                // and return it in dispatch(getToDosSuccess(data over here))

                return(dispatch(getToDosSuccess(response.data)))
            })
            .catch(err => dispatch(getToDosFailure(err)))
    }
}

// rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

const initialState = {
    todos: [],
    isFetching: false,
    error: false
}

export default function todosReducer(state = initialState, action) {

    switch(action.type) {
        case FETCHING_TODOS:
            return {
                ...state,
                isFetching: true
            }
        case FETCH_TODOS_SUCCESS:
            return {
                ...state,
                isFetching: false,
                todos: action.data
            }
        case FETCH_TODOS_FAILURE:
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

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

const rootReducer = combineReducers({
    todos
})

export default rootReducer

import React, { Component } from 'react';
import {
    View,
    Text,
    ActivityIndicator
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTodos } from '../actions/fetchTodos';

class HomeScreen extends Component {

    componentDidMount() {

        this.props.fetchTodos()

    }

    render() {

        const { todos, isFetching } = this.props.todos

        if (isFetching) {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <ActivityIndicator size={'large'} /> 
                </View>
            )
        } else {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <Text>todos.length</Text>
                </View>
            )
        }

    }

}

function mapStateToProps(state) {
    return {
        todos: state.todos
    }
}

function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators({ fetchTodos }, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

App.js

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

export default function configureStore() {
    let store = createStore(app, applyMiddleware(thunk))
    return store
}

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import configureStore from './configureStore';
import HomeScreen from './screens/HomeScreen';

const NavigationApp = StackNavigator({
    HomeScreen: { screen: HomeScreen }
})

const store = configureStore()

export default class App extends Component {

    render() {
        return (
            <Provider store={store}>
                <NavigationApp />
            </Provider>
        );
    }
}

export const FETCHING_TODOS = 'FETCHING_TODOS';
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getTodos())

        return(fetch('https://api.myjson.com/bins/fz62x'))
        .then(res => res.json())
        .then(json => {

            return(dispatch(getToDosSuccess(json)))
        })
        .catch(err => dispatch(getToDosFailure(err)))
    }
}

function getToDos() {

    return {
        type: FETCHING_TODOS
    }
}

function getToDosSuccess(data) {

    return {
        type: FETCH_TODOS_SUCCESS,
        data
    }
}

function getToDosFailure() {
    return {
        type: FETCH_TODOS_FAILURE
    }
}

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
import axios from 'axios';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getUser())
        axios.get('https://api.myjson.com/bins/fz62x')
            .then(function (response) {

                // handle your response here, create an object/array/array of objects etc... 
                // and return it in dispatch(getToDosSuccess(data over here))

                return(dispatch(getToDosSuccess(response.data)))
            })
            .catch(err => dispatch(getToDosFailure(err)))
    }
}

// rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

const initialState = {
    todos: [],
    isFetching: false,
    error: false
}

export default function todosReducer(state = initialState, action) {

    switch(action.type) {
        case FETCHING_TODOS:
            return {
                ...state,
                isFetching: true
            }
        case FETCH_TODOS_SUCCESS:
            return {
                ...state,
                isFetching: false,
                todos: action.data
            }
        case FETCH_TODOS_FAILURE:
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

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

const rootReducer = combineReducers({
    todos
})

export default rootReducer

import React, { Component } from 'react';
import {
    View,
    Text,
    ActivityIndicator
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTodos } from '../actions/fetchTodos';

class HomeScreen extends Component {

    componentDidMount() {

        this.props.fetchTodos()

    }

    render() {

        const { todos, isFetching } = this.props.todos

        if (isFetching) {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <ActivityIndicator size={'large'} /> 
                </View>
            )
        } else {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <Text>todos.length</Text>
                </View>
            )
        }

    }

}

function mapStateToProps(state) {
    return {
        todos: state.todos
    }
}

function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators({ fetchTodos }, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

现在，让我们继续创建我们的操作文件，该文件将放在

actions

文件夹中。让我们把它命名为

fetchToDos.js

。让我们使用

fetchapi

创建一个简单的函数

fetchToDos.js

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

export default function configureStore() {
    let store = createStore(app, applyMiddleware(thunk))
    return store
}

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import configureStore from './configureStore';
import HomeScreen from './screens/HomeScreen';

const NavigationApp = StackNavigator({
    HomeScreen: { screen: HomeScreen }
})

const store = configureStore()

export default class App extends Component {

    render() {
        return (
            <Provider store={store}>
                <NavigationApp />
            </Provider>
        );
    }
}

export const FETCHING_TODOS = 'FETCHING_TODOS';
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getTodos())

        return(fetch('https://api.myjson.com/bins/fz62x'))
        .then(res => res.json())
        .then(json => {

            return(dispatch(getToDosSuccess(json)))
        })
        .catch(err => dispatch(getToDosFailure(err)))
    }
}

function getToDos() {

    return {
        type: FETCHING_TODOS
    }
}

function getToDosSuccess(data) {

    return {
        type: FETCH_TODOS_SUCCESS,
        data
    }
}

function getToDosFailure() {
    return {
        type: FETCH_TODOS_FAILURE
    }
}

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
import axios from 'axios';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getUser())
        axios.get('https://api.myjson.com/bins/fz62x')
            .then(function (response) {

                // handle your response here, create an object/array/array of objects etc... 
                // and return it in dispatch(getToDosSuccess(data over here))

                return(dispatch(getToDosSuccess(response.data)))
            })
            .catch(err => dispatch(getToDosFailure(err)))
    }
}

// rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

const initialState = {
    todos: [],
    isFetching: false,
    error: false
}

export default function todosReducer(state = initialState, action) {

    switch(action.type) {
        case FETCHING_TODOS:
            return {
                ...state,
                isFetching: true
            }
        case FETCH_TODOS_SUCCESS:
            return {
                ...state,
                isFetching: false,
                todos: action.data
            }
        case FETCH_TODOS_FAILURE:
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

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

const rootReducer = combineReducers({
    todos
})

export default rootReducer

import React, { Component } from 'react';
import {
    View,
    Text,
    ActivityIndicator
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTodos } from '../actions/fetchTodos';

class HomeScreen extends Component {

    componentDidMount() {

        this.props.fetchTodos()

    }

    render() {

        const { todos, isFetching } = this.props.todos

        if (isFetching) {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <ActivityIndicator size={'large'} /> 
                </View>
            )
        } else {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <Text>todos.length</Text>
                </View>
            )
        }

    }

}

function mapStateToProps(state) {
    return {
        todos: state.todos
    }
}

function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators({ fetchTodos }, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

fetchToDos.js与Axios

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

import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { StackNavigator } from 'react-navigation'; import configureStore from './configureStore'; import HomeScreen from './screens/HomeScreen'; const NavigationApp = StackNavigator({ HomeScreen: { screen: HomeScreen } }) const store = configureStore() export default class App extends Component { render() { return ( <Provider store={store}> <NavigationApp /> </Provider> ); } }

export const FETCHING_TODOS = 'FETCHING_TODOS'; export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS'; export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; export function fetchToDos() { return (dispatch) => { dispatch(getTodos()) return(fetch('https://api.myjson.com/bins/fz62x')) .then(res => res.json()) .then(json => { return(dispatch(getToDosSuccess(json))) }) .catch(err => dispatch(getToDosFailure(err))) } } function getToDos() { return { type: FETCHING_TODOS } } function getToDosSuccess(data) { return { type: FETCH_TODOS_SUCCESS, data } } function getToDosFailure() { return { type: FETCH_TODOS_FAILURE } }

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; import axios from 'axios'; export function fetchToDos() { return (dispatch) => { dispatch(getUser()) axios.get('https://api.myjson.com/bins/fz62x') .then(function (response) { // handle your response here, create an object/array/array of objects etc... // and return it in dispatch(getToDosSuccess(data over here)) return(dispatch(getToDosSuccess(response.data))) }) .catch(err => dispatch(getToDosFailure(err))) } } // rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; const initialState = { todos: [], isFetching: false, error: false } export default function todosReducer(state = initialState, action) { switch(action.type) { case FETCHING_TODOS: return { ...state, isFetching: true } case FETCH_TODOS_SUCCESS: return { ...state, isFetching: false, todos: action.data } case FETCH_TODOS_FAILURE: return { ...state, isFetching: false, error: true } default: return state } }

import { combineReducers } from 'redux'; import todos from './todos'; const rootReducer = combineReducers({ todos }) export default rootReducer

import React, { Component } from 'react'; import { View, Text, ActivityIndicator } from 'react-native'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { fetchTodos } from '../actions/fetchTodos'; class HomeScreen extends Component { componentDidMount() { this.props.fetchTodos() } render() { const { todos, isFetching } = this.props.todos if (isFetching) { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <ActivityIndicator size={'large'} /> </View> ) } else { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <Text>todos.length</Text> </View> ) } } } function mapStateToProps(state) { return { todos: state.todos } } function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ fetchTodos }, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
继续讨论减速机。让我们创建两个文件-
index.js
，
todos.js
并将它们放在
reducers
文件夹中
todos.js

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

import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { StackNavigator } from 'react-navigation'; import configureStore from './configureStore'; import HomeScreen from './screens/HomeScreen'; const NavigationApp = StackNavigator({ HomeScreen: { screen: HomeScreen } }) const store = configureStore() export default class App extends Component { render() { return ( <Provider store={store}> <NavigationApp /> </Provider> ); } }

export const FETCHING_TODOS = 'FETCHING_TODOS'; export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS'; export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; export function fetchToDos() { return (dispatch) => { dispatch(getTodos()) return(fetch('https://api.myjson.com/bins/fz62x')) .then(res => res.json()) .then(json => { return(dispatch(getToDosSuccess(json))) }) .catch(err => dispatch(getToDosFailure(err))) } } function getToDos() { return { type: FETCHING_TODOS } } function getToDosSuccess(data) { return { type: FETCH_TODOS_SUCCESS, data } } function getToDosFailure() { return { type: FETCH_TODOS_FAILURE } }

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; import axios from 'axios'; export function fetchToDos() { return (dispatch) => { dispatch(getUser()) axios.get('https://api.myjson.com/bins/fz62x') .then(function (response) { // handle your response here, create an object/array/array of objects etc... // and return it in dispatch(getToDosSuccess(data over here)) return(dispatch(getToDosSuccess(response.data))) }) .catch(err => dispatch(getToDosFailure(err))) } } // rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; const initialState = { todos: [], isFetching: false, error: false } export default function todosReducer(state = initialState, action) { switch(action.type) { case FETCHING_TODOS: return { ...state, isFetching: true } case FETCH_TODOS_SUCCESS: return { ...state, isFetching: false, todos: action.data } case FETCH_TODOS_FAILURE: return { ...state, isFetching: false, error: true } default: return state } }

import { combineReducers } from 'redux'; import todos from './todos'; const rootReducer = combineReducers({ todos }) export default rootReducer

import React, { Component } from 'react'; import { View, Text, ActivityIndicator } from 'react-native'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { fetchTodos } from '../actions/fetchTodos'; class HomeScreen extends Component { componentDidMount() { this.props.fetchTodos() } render() { const { todos, isFetching } = this.props.todos if (isFetching) { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <ActivityIndicator size={'large'} /> </View> ) } else { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <Text>todos.length</Text> </View> ) } } } function mapStateToProps(state) { return { todos: state.todos } } function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ fetchTodos }, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
index.js

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

import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { StackNavigator } from 'react-navigation'; import configureStore from './configureStore'; import HomeScreen from './screens/HomeScreen'; const NavigationApp = StackNavigator({ HomeScreen: { screen: HomeScreen } }) const store = configureStore() export default class App extends Component { render() { return ( <Provider store={store}> <NavigationApp /> </Provider> ); } }

export const FETCHING_TODOS = 'FETCHING_TODOS'; export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS'; export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; export function fetchToDos() { return (dispatch) => { dispatch(getTodos()) return(fetch('https://api.myjson.com/bins/fz62x')) .then(res => res.json()) .then(json => { return(dispatch(getToDosSuccess(json))) }) .catch(err => dispatch(getToDosFailure(err))) } } function getToDos() { return { type: FETCHING_TODOS } } function getToDosSuccess(data) { return { type: FETCH_TODOS_SUCCESS, data } } function getToDosFailure() { return { type: FETCH_TODOS_FAILURE } }

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; import axios from 'axios'; export function fetchToDos() { return (dispatch) => { dispatch(getUser()) axios.get('https://api.myjson.com/bins/fz62x') .then(function (response) { // handle your response here, create an object/array/array of objects etc... // and return it in dispatch(getToDosSuccess(data over here)) return(dispatch(getToDosSuccess(response.data))) }) .catch(err => dispatch(getToDosFailure(err))) } } // rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; const initialState = { todos: [], isFetching: false, error: false } export default function todosReducer(state = initialState, action) { switch(action.type) { case FETCHING_TODOS: return { ...state, isFetching: true } case FETCH_TODOS_SUCCESS: return { ...state, isFetching: false, todos: action.data } case FETCH_TODOS_FAILURE: return { ...state, isFetching: false, error: true } default: return state } }

import { combineReducers } from 'redux'; import todos from './todos'; const rootReducer = combineReducers({ todos }) export default rootReducer

import React, { Component } from 'react'; import { View, Text, ActivityIndicator } from 'react-native'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { fetchTodos } from '../actions/fetchTodos'; class HomeScreen extends Component { componentDidMount() { this.props.fetchTodos() } render() { const { todos, isFetching } = this.props.todos if (isFetching) { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <ActivityIndicator size={'large'} /> </View> ) } else { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <Text>todos.length</Text> </View> ) } } } function mapStateToProps(state) { return { todos: state.todos } } function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ fetchTodos }, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
基本上是“起重”了。我只会创建一个屏幕，因为假设用户在主屏幕上点击后退按钮（Android），他们最终会出现在启动屏幕上。所以在这个例子中，我将只使用一个屏幕
HomeScreen.js

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

import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { StackNavigator } from 'react-navigation'; import configureStore from './configureStore'; import HomeScreen from './screens/HomeScreen'; const NavigationApp = StackNavigator({ HomeScreen: { screen: HomeScreen } }) const store = configureStore() export default class App extends Component { render() { return ( <Provider store={store}> <NavigationApp /> </Provider> ); } }

export const FETCHING_TODOS = 'FETCHING_TODOS'; export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS'; export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; export function fetchToDos() { return (dispatch) => { dispatch(getTodos()) return(fetch('https://api.myjson.com/bins/fz62x')) .then(res => res.json()) .then(json => { return(dispatch(getToDosSuccess(json))) }) .catch(err => dispatch(getToDosFailure(err))) } } function getToDos() { return { type: FETCHING_TODOS } } function getToDosSuccess(data) { return { type: FETCH_TODOS_SUCCESS, data } } function getToDosFailure() { return { type: FETCH_TODOS_FAILURE } }

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; import axios from 'axios'; export function fetchToDos() { return (dispatch) => { dispatch(getUser()) axios.get('https://api.myjson.com/bins/fz62x') .then(function (response) { // handle your response here, create an object/array/array of objects etc... // and return it in dispatch(getToDosSuccess(data over here)) return(dispatch(getToDosSuccess(response.data))) }) .catch(err => dispatch(getToDosFailure(err))) } } // rest is the same...

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants'; const initialState = { todos: [], isFetching: false, error: false } export default function todosReducer(state = initialState, action) { switch(action.type) { case FETCHING_TODOS: return { ...state, isFetching: true } case FETCH_TODOS_SUCCESS: return { ...state, isFetching: false, todos: action.data } case FETCH_TODOS_FAILURE: return { ...state, isFetching: false, error: true } default: return state } }

import { combineReducers } from 'redux'; import todos from './todos'; const rootReducer = combineReducers({ todos }) export default rootReducer

import React, { Component } from 'react'; import { View, Text, ActivityIndicator } from 'react-native'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { fetchTodos } from '../actions/fetchTodos'; class HomeScreen extends Component { componentDidMount() { this.props.fetchTodos() } render() { const { todos, isFetching } = this.props.todos if (isFetching) { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <ActivityIndicator size={'large'} /> </View> ) } else { return( <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <Text>todos.length</Text> </View> ) } } } function mapStateToProps(state) { return { todos: state.todos } } function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ fetchTodos }, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

import React，{Component}来自'React'；进口{ 看法文本，活动指示器 }从“反应本机”；从“redux”导入{bindActionCreators}；从'react redux'导入{connect}；从“../actions/fetchTodos”导入{fetchTodos}；类主屏幕扩展组件{ componentDidMount（）{ this.props.fetchTodos（） } render（）{ const{todos，isFetching}=this.props.todos 如果（正在获取）{ 返回( ) }否则{ 返回( 托多斯长度 ) } } } 函数MapStateTops（状态）{ 返回{ 待办事项：state.todos } } 功能图DispatchToprops（调度）{ 返回{ …bindActionCreators（{fetchTodos}，dispatch） } } 导出默认连接（mapStateToProps、mapDispatchToProps）（主屏幕）
我真的希望你能发现这个概念很有用，因为根据我的经验，它在我刚开始的时候帮助了我很多，它帮助我更好地理解了redux的整个概念

抱歉，如果有任何打字错误和错误。我当时很忙。
如果你不介意的话，我可以问你一个问题。那么，如果我想使用axios进行数据提取，那么需要做哪些更改。实际上，我对你提到的操作的fetchToDo.js文件有点困惑。我的意思是，我只想简单地使用axios库从api获取结果。对不起，我对redux非常陌生，所以这让我很困惑。如果你不介意的话，你能告诉我如何使用axios库编写一个简单的操作文件，只从api中获取数据吗？@pranami我使用axios创建了一个数据获取方法，它与获取api非常相似。你建议我们避免这种情况吗“从屏幕发送到服务，然后在reducer中执行工作”路径，在我不希望数据保留在存储中的情况下？@Neo是的，当然。任何适合您需要的。请任何人告诉我如何将参数传递到
fetchTodos
操作？