Question

动作正在接收道具并将它们记录到控制台，但接收这些相同道具的组件不能在我的UI上呈现。这是一个React Native应用程序。这是link to the Repo 要查看的所有页面都在src文件夹中。

我跟着Buckies video series来实现这一目标，所以我的代码几乎就像他的代码一样。我更改的唯一代码行是我的OnPress功能。这是我尝试过的唯一允许控制台接收道具的语法。此外，在他的视频系列中，他创建了两个独立的组件。我将两个组件合并为一个组件，因此我在下面的代码较少。一直试图让这个工作整周:(

我的行动创作者：

import USER_SELECTED from './types';

export const selectUser = (user) => {
console.log("You clicked on user:", user.first);
return {
    type: USER_SELECTED,
    payload: user
   }
};

我的行动减少

import USER_SELECTED from '../actions/types';

export default (state={}, action) => {

switch(action.type) {
  case USER_SELECTED:
    return action.payload;
    break;
}
return state;  
};

MY COMPONENT

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { selectUser } from '../../actions';

class UserList extends Component {

    createListItems() {
        return this.props.users.map((user) => {
            return (    
                <View key={user.id}> 
                    <Button onPress={function(){return selectUser(user);}}>
                        <Text>{user.first} {user.last}</Text>
                        <Icon  style={styles.TextLight} name='arrow-forward' android="md-arrow-forward"/>
                    </Button>
                </View>
                );
            });
    }

    render() {
        return ( 
        <View>

            {this.createListItems()}
            {/* ALL BUTTONS ARE MAPPED, AND DISPLAYED HERE */}

            <View> 
                <Text style={{fontSize: 20, margin: 10}}>First: {this.props.user.first} </Text>
                <Text style={{fontSize: 15, margin: 10}}>Last: {this.props.user.last} </Text>
                {/* THESE TEXT OBJECTS ARE NOT DISPLAYING THE PROPS WHEN THE BUTTON ABOVE IS CLICK.  IT ONLY SHOWS 
                IN THE CONSOLE.  */}
            </View>

        </View>
            );
    }
}

    function mapStateToProps(state) {
        return {
            users: state.users,
            user: state.activeUser 
        };
    }

    function matchDispatchToProps(dispatch) {
        return bindActionCreators({ selectUser: selectUser }, dispatch)
    }

export default connect(mapStateToProps, matchDispatchToProps)(UserList);

我的屏幕

  import UserDetails from '../../components/users/ActiveUser';

  class LCL extends Component {
   render() {
    return (
        <Container>
              {/* <ImageBackground source={launchscreenBg} style=
              {styles.imageContainer}>  */}
            <Header style={styles.MainContainer} hasTabs>
                <Left/>
                <Body>
                    <Title style={styles.title_font}>LCL</Title>
                </Body>
                <Right />
            </Header>

        <Content padder>
        <Text>
            This is the LCL shipments
        </Text>

            <UserList />

        </Content>
            <Footer_Nav navigation={this.props.navigation}/>
        </Container>
        );
    }
}
export default LCL

MY INDEX.JS文件在我的减刑文件中

import { combineReducers } from 'redux';
//import keys from './keys_reducer';
import UserReducer from './LCL_reducer_data';
import AirReducer from './Air_reducer_data';
import ActiveUserReducer from './LCL_ActionReducer_active_user';



const AllReducers = combineReducers({

  users: UserReducer,
  AirList: AirReducer,
  activeUser: ActiveUserReducer,
    //keys: keys,
});

export default AllReducers;

Answer 1

问题是你没有正确地调度动作，你只是在运行动作创建者，但它没有做任何事情只是返回一个对象（实际动作）。

为了解决这个问题，你需要调度这样的动作：

store.dispatch(selectUser());

这样行动将转到减速器，您的减速器将更新，然后您的组件将接收新数据。

你可以从上下文中获取商店，但是......你也可以使用你已经在matchDispatchToProps内绑定它的功能，为了做到这一点你需要做这样的事情：

createListItems() {
    const selectUserBinded = this.props.selectUser; // <----

    return this.props.users.map((user) => {
        return (    
            <View key={user.id}> 
                <Button onPress={function(){return selectUserBinded(user);}}>
                    <Text>{user.first} {user.last}</Text>
                    <Icon  style={styles.TextLight} name='arrow-forward' android="md-arrow-forward"/>
                </Button>
            </View>
            );
        });
}

该功能将使用商店中的dispatch自动运行您的操作创建者。

请注意this.props.selectUser !== selectUser !! <{1}}已绑定到商店，而this.props.selectUser则未绑定。

修改的尝试绑定你的行为：

selectUser

看起来更干净，更容易理解，第二个参数function mapStateToProps(state) { return { users: state.users, user: state.activeUser }; } export default connect(mapStateToProps, { selectUser: selectUser })(UserList);只是一个带有绑定方法的对象，不需要定义详细函数来进行绑定，只需要一个简单的对象。如果使用ES6，您可以{ selectUser: selectUser }

Redux Action正在触发但UI未更新

1 个答案: