标签: react-redux

我的Redux应用程序中有一种情况,我目前有3个独立的reducer来处理从api中获取数据.我的一个减速器的一个例子是:

const INITIAL_STATE = {
  data: [],
  loading: false,
  error: ''
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_ALL_ORDERS_START:
      return {
        ...state,
        loading: true
      };
    case GET_ALL_ORDERS_SUCCESS:
      return {
        ...state,
        allOrders: action.payload,
        loading: false
      };
    case GET_ALL_ORDERS_FAIL:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

注意加载和错误状态,这些在每个当前的reducer中是相同的,并且对于我编写的涉及从api获取数据的任何后续reducecer而言.

我想添加一个仅用于加载和错误状态的reducer.其他3将存储数据.

这会给我:

数据减少器x 3

const INITIAL_STATE = {
  data: []
  // any other state in the future
};

export default (state = INITIAL_STATE, …

我正在尝试在我的reactjs应用程序中应用redux.由于这些错误,我无法继续:

我确信我已经安装了所需的所有依赖项.这是我的package.json的相关部分

"dependencies": {
   "react-redux": "^5.0.6",
   "redux": "^3.7.2",
   "redux-logger": "^3.0.6",
   "redux-promise": "^0.5.3",
   "redux-thunk": "^2.2.0",
}

这是我实现redux的index.js的一部分

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import reducers from './reducers';

const logger = createLogger();
const store = createStore(reducers,
    applyMiddleware(
        thunkMiddleware, logger
    )
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

反应还原函数的函数mapStateToProps和mapDispatchToProps参数之间的区别是什么connect？任何人都可以用例子给出合适的解释

以下代码使用 RTK 查询创建 Redux Hook：

export const specialtiesApi = createApi({
    reducerPath: 'specialtiesApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://someplace.com/' }),
    endpoints: (builder) => ({
        getSpecialties: builder.query({
            query: (name) => `specialties`,
        }),
    }),
});

export const { useGetSpecialtiesQuery } = specialtiesApi;

最后一行代码抛出 Typescript 编译时错误：

Property 'useGetSpecialtiesQuery' does not exist on type 'Api<BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, { getSpecialties: QueryDefinition<...>; }, "specialtiesApi", never, unique symbol>'

我的代码改编自https://redux-toolkit.js.org/rtk-query/usage-with-typescript使用 Typescript 4.3.5。

我看不出有什么问题。有任何想法吗？

我正在使用Redux创建一个应用程序,并且为了解决为什么最好将动作和缩减器放在单独的文件中.至少,这是我从所有例子中得到的印象.

每个操作或操作创建器似乎映射到由reducer调用的单个函数(在switch语句内).将它们放在同一个文件中是不合逻辑的？它还使操作类型和切换案例使用相同的常量更容易,因为它不必在文件之间导出/导入.

所以这是我正在玩的代码

    import { createStore, applyMiddleware } from 'redux'
    import thunk from 'redux-thunk'
    import axios from 'axios'

    const initialState = {
        user: {},
        requesting: false,
        err: null
    }

    const reducer = (state = initialState, action) => {
        switch (action.type) {
            case 'REQ_USER_INIT': return { ...state, requesting: true }
            case 'REQ_USER_DATA': return { ...state, requesting: false, user: action.user }
            case 'REQ_USER_ERR': return { ...state, requesting: false, err: action.err }
        }
        return state;
    }

    const logger = (store) => (next) => (action) = …

我不明白需要什么redux-thunk.据我所知,a thunk是一个返回函数的函数.在我看来,包装的表达式和中间件的使用可以做更多的工作来模糊正在发生的事情.取自redux-thunk的示例代码

import thunk from 'redux-thunk';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);


// Meet thunks.
// A thunk is a function t hat returns a function.
// This is a thunk.

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce …

我得到这个错误

_react.default.memo不是函数

和wrapWithConnect。
这是一个react-native项目，在使用connect函数将调度程序连接到我的react组件之前，它运行良好：

套件版本：

    "react": "16.5.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",

码

const mapDispatchToProps = dispatch => {
 return { 
  sendEmail: (email, navigateMap) => dispatch(sendEmail, navigateMap))

export default connect(null, mapDispatchToProps)(Login)

我正在将我的 React / Redux 应用程序移动到 Redux 工具包，并按照此处给出的说明进行操作。

我的自定义选择器和调度，根据文档。

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/index";

export const useMyDispatch = () => useDispatch<AppDispatch>();
export const useMySelector: TypedUseSelectorHook<RootState> = useSelector;

useMyDispatch 的类型是useMyDispatch(): Dispatch<AnyAction>

类型GETALLPAGESACTION是

export type GETALLPAGESACTION = {
  pagesLoading?: boolean;
  pages?: PageType[] | null;
  error?: Error | null;
}

这是我非常基本的行动：

export const getAllPages = createAsyncThunk<GETALLPAGESACTION, 
 string,
 { dispatch: AppDispatch; state: RootState; }>("pages/getAllPages", 
   async () => { …

任何人都遇到过这个问题，并且对您为解决此问题所做的工作有大致的了解或修复。我只需要朝着正确的方向推动。