Question

我已经为此工作了无数个小时，这篇文章最接近，但我似乎无法将我的状态变为道具：React-redux store updates but React does not。

我希望将状态存储到道具中。我有研究mapStateToProps，这也是空的。我无法弄清楚如何将状态存储到道具中。

动作

export function userHome(){
 return function(dispatch){
    fetch('/api/userhome', {
        headers: {
            'content-type': 'application/json',
            'accept': 'application/json'
        },
        credentials: 'include'
    }).then((response) => response.json())
    .then((results) => {
        if(results != 401){
            dispatch({
                type: types.USER_HOME,
                applications: results.applications,
                user: results.user
            })
        } else {
            browserHistory.push('/');
        }
    });
  }
};

减速

export var userHomeReducer = (state = {}, action) => {
switch(action.type){
    case types.USER_HOME:
        return { ...state, user: action.user, applications: action.applications };
    default:
        return state;
  }
}

存储（此刻只是担心用户）

export var configure = (initialState = {}) => {
    var reducers = combineReducers({
        createAccount: auth_reducers.createAccountReducer,
        login: auth_reducers.loginReducer,
        logout: auth_reducers.logoutReducer,
        user: user_reducers.userHomeReducer
    });

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);

    return store;
}

路由器页面 - 订阅中的控制台日志显示正确的状态

store.subscribe(() => {
    console.log('New state', store.getState());
});

store.dispatch(actions.userHome());

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>{routes}</Router>
    </Provider>,
  document.getElementById('app')
);

主页（将道具传递到下一页）

var UserHomePage = React.createClass({
    render: function() {
        return (
            <div>
                <MainNavBar/>
                <CreateRecordForm/>
                <ApplicationList/>
            </div>
        );
    }
});


export default connect(
    (state) => {
        return state;
    }
)(UserHomePage);

ApplicationList - 我想把UserHomePage中的道具传递到这里。当我在console.log this.props时，它将用户显示为空对象。

class ApplicationList extends Component{
    componentDidMount(){
        this.props.userHome()
    }
    render() {
        const { user } = this.props;
        console.log(this.props);
        var renderApplications = () => {
            return user.applications.map((application, index) => {
                return (
                    <ApplicationLinkItem
                        company={application.companyName}
                        position={application.position}
                        id={application.id}
                        key={index}
                    />
                );
            });
        }
        var noApplications = () => {
            if (userHome.applications.length == 0){
                return (
                    <p>No Applications</p>
                );
            }
        }
        return (
            <div>
                <p>Applications</p>
                {noApplications()}
                {renderApplications()}
            </div>
        );
    } 
};

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

export default connect(mapStateToProps, actions)(ApplicationList);

Answer 1

这是我唯一能做到的事情。

在ApplicationList中将mapStateToProps更改为此。

const mapStateToProps = (state) => {
  return {
    user: state.user,
    applications: state.applications
  }
}

如果仍然无效，请告诉我。

React-Redux：无法在道具中存储状态

1 个答案: