在 React + Redux 中，Action 不会触发减速器 [英] Action does not trigger a reducer in React + Redux

问题描述

我正在开发一个 react-redux 应用程序，由于某种原因，我调用的操作没有到达 reducer(其中我目前只有一个 log 语句).我附上了我认为相关的代码，任何贡献都将受到高度赞赏.

I'm working on a react-redux app and for some reason the action I call does not reach the reducer (in which I currently only have a log statement). I have attached the code I feel is relevant and any contributions would be highly appreciated.

在组件的函数内调用的动作:

Action called within function in component:

onSearchPressed() {
    console.log('search pressed');
    this.props.addToSaved();
}

actions/index.js:

actions/index.js:

var actions = exports = module.exports

exports.ADD_SAVED = "ADD_SAVED";

exports.addToSaved = function addToSaved() {
  console.log('got to ADD_SAVED step 2');
  return {
    type: actions.ADD_SAVED
  }
}

reducers/items.js:

reducers/items.js:

const {
  ADD_SAVED
} = require('../actions/index')

const initialState = {
    savedList: []
}

module.exports = function items(state = initialState, action) {
    let list

    switch (action.type) {
        case ADD_SAVED:
            console.log('GOT to Step 3');
            return state;
        default:
            console.log('got to default');
            return state;
    }
}

reducers/index.js:

reducers/index.js:

const { combineReducers } = require('redux')
const items = require('./items')

const rootReducer = combineReducers({
  items: items
})

module.exports = rootReducer

store/configure-store.js:

store/configure-store.js:

import { createStore } from 'redux'
import rootReducer from '../reducers'

let store = createStore(rootReducer)

onSearchPressed 的整个组件:

Entire component for onSearchPressed:

class MainView extends Component {
    onSearchPressed() {
        this.props.addToSaved();
    }
    render() {
        console.log('MainView clicked');
        var property = this.props.property;

        return (
            <View style={styles.container}>
                <Image style={styles.image}
                    source={{uri: property.img_url}} />
                <Text style={styles.description}>{property.summary}</Text>
                <TouchableHighlight style = {styles.button}
                        onPress={this.onSearchPressed.bind(this)}
                        underlayColor='#99d9f4'>
                        <Text style = {styles.buttonText}>Save</Text>
                    </TouchableHighlight>
            </View>
        );
    }
}

module.exports = MainView;

推荐答案

正如 Rick Jolly 在对您的问题的评论中提到的，您的 onSearchPressed() 函数实际上并未调度该操作，因为 addToSaved() 只返回一个 action 对象 - 它不发送任何东西.

As Rick Jolly mentioned in the comments on your question, your onSearchPressed() function isn't actually dispatching that action, because addToSaved() simply returns an action object - it doesn't dispatch anything.

如果你想从一个组件分派动作，你应该使用 react-redux将您的组件连接到 redux.例如:

If you want to dispatch actions from a component, you should use react-redux to connect your component(s) to redux. For example:

const { connect } = require('react-redux')

class MainView extends Component {
  onSearchPressed() {
    this.props.dispatchAddToSaved();
  }
  render() {...}
}

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchAddToSaved: () => dispatch(addToSaved())
  }
}

module.exports = connect(null, mapDispatchToProps)(MainView)

请参阅 Redux 文档的 'Usage With React' 部分了解更多信息信息.

See the 'Usage With React' section of the Redux docs for more information.

这篇关于在 React + Redux 中，Action 不会触发减速器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！