Question

我是 react 和 redux 的新手，并试图从 store 分派状态，但无法这样做，请任何人帮我解决问题...

App.js

import React from "react";
import store from './reduxStore/store';
import { Provider } from 'react-redux';
import Sidebar from './Sidebar';


function App() {

  return (
    <div>
      <Provider store={store}>
         <Sidebar ></Sidebar>
      </Provider>
    </div>
  );
}



export default (App);

这是我的sidebar.js组件

import React, { useEffect } from 'react';
import { updatePageLinkActions } from "../../reduxStore/actions/updatePageLinkActions";
import { connect } from "react-redux";



const Sidebar = () =>{

useEffect(() => {
    return updatePageLinkActions
}, [])


    return (
        <>
            <ListItem button onClick={updatePageLinkActions}>
                <ListItemIcon><Home></Home></ListItemIcon>
                <ListItemText primary="Dashboard" />
            </ListItem>
            <ListItem button onClick={() => handleOpenPage("contact")}>
                <ListItemIcon><AcUnit></AcUnit></ListItemIcon>
                <ListItemText primary="Contact" />
            </ListItem>
        </>
        
    )
}

const mapStateToProps = (state) => ({
    updatePage: state.updatePage.pgLink
})

export default connect(mapStateToProps, { updatePageLinkActions })(SidebarItems);

商店 Store.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};
const middleWare = [thunk]

const store = createStore(
  rootReducer, 
  initialState, 
  compose(
    applyMiddleware(...middleWare),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  )
) 

export default store;

Root Reducer rootReducer.js

import { combineReducers } from 'redux';
import updatePageLinkReducer from './updatePageLinRreducer';

export default combineReducers({
    updatePage: updatePageLinkReducer
});

操作 updatePageLinkActions.js

import { UPDATE_PAGE_LINK } from "../actionTypes";
//import store from "../store";

export const updatePageLinkActions = dispatch => {

  console.log("actions log ", dispatch.payload)

  return dispatch({
      type: UPDATE_PAGE_LINK,
      payload: {pageLink : "Action_pageLink" }
    })        
};

Reducer updatePageLinkReducer.js

import { UPDATE_PAGE_LINK } from '../actionTypes';

const initialState = {
  pgLink: []
};

// eslint-disable-next-line import/no-anonymous-default-export
export default function(state = initialState, action) {
  switch (action.type) {
    case UPDATE_PAGE_LINK:
      console.log("Action called ")
      return { ...state, pgLink: action.payload }
    default:
      return state;
  }
}

我无法从商店发送值，请有人帮助我...

Answer 1

如果您正在使用功能组件，我强烈建议您不要使用 connect。

要从 Redux 存储中获取状态，可以使用 useSelector 钩子，而要调度操作，可以使用 useDispatch 钩子。

import { useDispatch, useSelector } from 'react-redux'
...
const dispatch = useDispatch()
const updatePage = useSelector(state => state.updatePage.pgLink)

const updatePageLinkActions = () => {
    dispatch({
      type: UPDATE_PAGE_LINK,
      payload: {pageLink : "Action_pageLink" }
    })
}
...

Answer 2

您的动作创建者定义不正确。

应该是这样的：


export const updatePageLinkActions = () => dispatch => {

  console.log("actions log ", dispatch.payload)

  return dispatch({
      type: UPDATE_PAGE_LINK,
      payload: {pageLink : "Action_pageLink" }
    })        
};

无法从 redux 存储分派状态值

2 个答案: