Question

我一直在关注本教程，将redux集成到我的本机应用程序中。

https://github.com/jlebensold/peckish

在我的主页视图中，我无法从我的操作文件夹中调用这些功能。

一个区别是我在我的应用中使用了反应导航。不知道我是否需要将redux与反应导航集成以便能够将redux用于所有数据？

以下是我一直在做的完整实施代码。

在主屏幕上，我调用ComponentDidMount上的fetchSite函数来启动与axios的异步调用。但我甚至无法访问此功能。

对于这篇长篇文章感到抱歉，但我无法弄清楚如何使这项工作变得难以制作更短的代码示例来解释我的应用程序的结构。

如果有任何问题，请告诉我。

index.ios.js

import React from 'react'
import { AppRegistry } from 'react-native'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose} from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'

import reducer from './app/reducers'
import AppContainer from './app/index'


// middleware that logs actions
const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__  });

function configureStore(initialState) {
    const enhancer = compose(
        applyMiddleware(
            thunkMiddleware, // lets us dispatch() functions
            loggerMiddleware,
        ),
    );
    return createStore(reducer, initialState, enhancer);
}

const store = configureStore({});

const App = () => (
    <Provider store={store}>
        <AppContainer />
    </Provider>
);

AppRegistry.registerComponent('Appero', () => App;

减速器/ index.js

import { combineReducers } from 'redux';
import * as sitesReducer from './sites'

export default combineReducers(Object.assign(
    sitesReducer,
));

减速器/ sites.js

import createReducer from '../lib/createReducer'
import * as types from '../actions/types'

export const searchedSites = createReducer({}, {
    [types.SET_SEARCHED_SITES](state, action) {
        let newState = {};
        action.sites.forEach( (site) => {
            let id = site.id;
            newState[id] = Object.assign({}, site, { id });
        });
        return newState;
    },

});

../ LIB / createReducer

export default function createReducer(initialState, handlers) {

    return function reducer(state = initialState, action) {
        if (handlers.hasOwnProperty(action.type)) {

            return handlers[action.type](state, action)
        } else {
            return state
        }
    }
}

../动作/类型

export const SET_SEARCHED_SITES = 'SET_SEARCHED_SITES';

./app/index

中的AppContainer

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ActionCreators } from './actions';

console.log(ActionCreators); //Properly gathered the functions from the actions folder

import { Root } from './config/router';

window.store = require('react-native-simple-store');
window.axios = require('axios');

class App extends Component {
    render() {
        return (
            <Root />
        )
    }
}

function mapDispatchToProps(dispatch) {

    return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapDispatchToProps)(App);

ActionCreators in＆＃39; ./ actions＆＃39;;

import * as SiteActions from './sites'

export const ActionCreators = Object.assign({},
    SiteActions,
);

＆＃39; ./ actions / sites＆＃39;

中的操作

import * as types from './types' //See above

export function fetchSites(token) {

    return (dispatch, getState) => {

        let instance = axios.create({
            baseURL: url + 'api/',
            timeout: 10000,
            headers: {'Accept' : 'application/json', 'Authorization' : 'Bearer ' + token}
        });

        instance.get('/sites?page=1')
            .then(response => {

                console.log(response.data.data);

                dispatch(setSearchedSites({sites: response.data.data}));

            }).catch(error => {

                console.log(error);
        });

    }
}

export function setSearchedSites({ sites }) {

    return {
        type: types.SET_SEARCHED_SITES,
        sites,
    }
}

基于反应导航的导航根文件 我为这个例子尽可能简单。

import React from 'react';

import {StackNavigator} from 'react-navigation';

import Home from '../screens/Home';

export const Root = StackNavigator({
    Home: {
        screen: Home,
    }
});

最后是我的主屏幕

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

class Home extends Component {

    componentDidMount()
    {
        let token = "12345678" //Just for this example
        this.props.fetchSites(token).then( (response) => {
            console.log(response);
        });
    }

    render() {

        return (
            <View>
                <Text>This is the Home view</text>
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        searchedSites: state.searchedSites
    };
}

export default connect(mapStateToProps)(Home);

Answer 1

要使用操作方法，您需要在主屏幕中进行连接，如下所示

import { fetchSites } from '<your-path>'

// your Home's other code.

const mapDispatchToProps = (dispatch) => {
    return{
        fetchSites:dispatch(fetchSites())
    } 
}

export default connect(mapStateToProps,mapDispatchToProps)(Home);

之后，您可以随时使用 fetchSites 作为 this.props.fetchSites 。

使用react native和redux进行异步调用，thunk

1 个答案: