Question

我正在尝试找出将redux与react挂钩一起使用的最佳方法。我看到了以下

但是我不相信这是最好的方法。有人有其他想法吗？

我也看到了以下内容，看起来还不错。 https://www.npmjs.com/package/redux-react-hook

谢谢

Answer 1

官方static uint16_t latestSample; // Other functions to configure ADC and timer... // Returns latest sample uint16_t getLatestSample() { return latestSample; } // Updates latest sample __interrupt void adca1_isr(void) { latestSample = AdcaResultRegs.ADCRESULT0; AdcaRegs.ADCINTFLGCLR.bit.ADCINT1 = 1; PieCtrlRegs.PIEACK.all = PIEACK_GROUP1; }软件包从v7.1开始提供钩子。可以使用Redux钩子代替react-redux函数。

`connect(mapStateToProps, mapDispatchToProps)`

使用选择器功能从Redux存储状态提取数据。

`useSelector()`

返回对调度的引用，该引用可用于调度动作。

这是一个实现计数器的示例，该计数器的值由Redux管理。

useDispatch()

来源：https://react-redux.js.org/api/hooks

Answer 2

您不需要使用带有钩子的redux来管理状态，您可以结合使用context api和自定义钩子来创建类似的东西

const initialState = {
    stateSet: false,
    plan: {
    }
}
const AppReducer = (state = initialState, action) => {
    return {
        plan: planReducer(state.plan, action)
    }
}



const AppProvider = (props) => {

    const [state, dispatch] = useReducer(AppReducer, initialState);
    return (
        <AppStateContext.Provider value={state}>
            <AppDispatchContext.Provider value={dispatch}>
                {props.children}

            </AppDispatchContext.Provider>
        </AppStateContext.Provider>
    )


}

const useAppState = () => {
    const context = React.useContext(AppStateContext);
    return context;
}


const useAppDispatch = () => {
    const context = React.useContext(AppDispatchContext);
    return context;
}

然后在组件内部，您可以使用任何组件

const { plan } = useAppState();
 dispatch({ type: 'updateBusinessInfo', payload: { businessInfo: businessInfo, addOnsInfo: addOnsInfo } });

请参阅kencdoods的https://kentcdodds.com/blog/how-to-use-react-context-effectively精彩帖子

Answer 3

在撰写本文时，它仍处于alpha阶段，如果您想尝试将它的react-redux更新为v7.1.0-alpha.4。

https://react-redux.js.org/next/api/hooks#hooks

Answer 4

最近我自己做了此操作后，我就发布了

How to connect redux store using useSelector() when input fields already mapped using useState()

确保您npm我反应-redux @ next

欢呼

Answer 5

以下是如何通过 3 个简单步骤将 Redux 与 Hooks 结合使用：反例。

源代码：https://github.com/trackmystories/Redux-hooks-counter-app-with-axios.

注意：https://react-redux.js.org/introduction/getting-started

第 1 步：

创建一个 reducer.js 文件，定义并组合你的 reducer：

reducer.js

    import { combineReducers } from "redux";

 
    const counter = (state = 0, action) => {
      switch (action.type) {
        case "ADD":
          return state + 1;
        case "SUBTRACT":
          return state - 1;
        default:
          return state;
      }
    };
    
  const rootReducer = combineReducers({
    counter
    // additional reducers ...
});

export default rootReducer;

第 2 步

创建一个计数器组件，它将访问状态并将其呈现给视图：

注意：请参阅“Redux 术语和概念”以更好地理解操作、状态和视图。 https://redux.js.org/tutorials/essentials/part-1-overview-concepts

您不需要使用带有 redux 钩子的连接 mapStateToProps 和 dispatchStateToProps 而是使用 { useDispatch, useSelector }。

我们可以直接在按钮内部传递动作“ADD”和“SUBTRACT”，无需定义action.js文件。

CounterComponent.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

export default function CounterComponent() {
  const dispatch = useDispatch(); // dispatct action "ADD","SUBTRACT".
  const counter = useSelector((state) => state.counter); // your apps state.
  
    return (
    <div>
     // dispatch "SUBTRACT"
     <button onClick={() => dispatch({ type: "SUBTRACT",})}>
         SUBTRACT
      <button>

        // pass the current state 
        <text> display count : {counter}</text> 


       // dispatch "ADD"
       <button onClick={() => dispatch({ type: "ADD",})}>
          ADD
       <button>

      </div>
     )
     
    }

第 3 步：

最后将您的 RootReducer 链接到 createStore 并将其传递给 Provider。

App.js

import React from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";

import CounterComponent from './CounterComponent.jsx';


 
// import your reducers
import rootReducer from "./reducers"; 


// link your reducers to the store 
const store = createStore(rootReducer); 



// Pass your store to the Provider wrapping your Component. 

export default function App() {
  return (
     <>
      <Provider store={store}> 
        <CounterComponent/>
      </Provider>
    </>
  );
};

将redux与react挂钩一起使用

5 个答案:

connect(mapStateToProps, mapDispatchToProps)

useSelector()

`connect(mapStateToProps, mapDispatchToProps)`

`useSelector()`