Redux Action正在触发但UI未更新

问题描述 投票：0回答：1

该操作正在接收道具并将其记录到控制台，但接收这些相同道具的组件将无法在我的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;  
};

我的组成部分

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;
reactjs redux action
1个回答
0
投票

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

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

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 !! this.props.selectUser已经绑定到商店，而selectUser不是。

编辑尝试绑定您的动作，如下所示：

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

export default connect(mapStateToProps, { selectUser: selectUser })(UserList);

这看起来更干净，更容易理解，第二个参数{ selectUser: selectUser }只是一个带有绑定方法的对象，不需要定义详细函数来进行绑定，只需要一个简单的对象。如果使用ES6，你可以做{ selectUser }

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.