redux 如何从任何组件访问任何属性和功能

brccelvz 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(145)

我是一个在TypeScript中使用Redux的React/NextJS新手，我觉得Redux的设置非常难看，我想知道是否有更好的方法来实现它。我按照常见的教程创建了商店、reducer和操作然后以这种方式连接_app.tsx：

import { Provider } from 'react-redux'
import store from '@store/store'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp

然后将状态连接到props，并连接到我index.tsx中的redux，方法如下：

import { StoreState } from '@store/reducers'

import {
  IData1,
  IData2,
  function1,
  function2,
  function3,
  function4,
  function5,
} from '@store/actions'

interface IProps {
  data1: IData1[]
  data2: IData2
  function1: Function
  function2: Function
  function3: Function
  function4: Function
  function5: Function
}

const _Home: NextPage<IProps> = (props) => {
  const {
    data1,
    data2,
    function1,
    function2,
    function3,
    function4,
    function5,
  } = props

  return (<div>
    <SomeComponent fct5={fonction5}
  </div>)
}

const mapStateToProps = (
  state: StoreState
): { data1: IData1[]; data2: IData2 } => {
  return { data1: state.data1, data2: state.data2 }
}

const Home = connect(mapStateToProps, {
  function1,
  function2,
  function3,
  function4,
  function5,
})(_Home)

export default Home

首先，我必须导入所有要使用的结构和函数，然后我必须声明要作为属性传递给我的组件的接口，提取我的组件中的属性以实际使用它。此外，我还必须使用mapStateToProps和函数完成所有连接。
我发现这是非常繁琐，感觉多余，但也许我没有做的事情正确，所以请让我知道，如果有一个更好的，更清晰的方式来做。
现在，如果我想使用一些Redux操作或使用其他组件中存储的数据，我的选择是什么？我是否必须为所有组件使用Redux操作和状态进行连接？或者只是在顶部组件中创建一个巨大的接口，并通过组件属性和属性传递函数和数据，就像示例中的function 5一样？

redux

来源：https://stackoverflow.com/questions/73610756/how-to-access-any-props-and-functions-from-any-component

2条答案

按热度按时间

jm2pwxwz1#

为你指明另一个方向：如果你不想使用react-redux，你可以使用React context和React dispatch，这样，reducer就是接受一个状态和一个动作，然后输出另一个状态的函数。
React上下文：

import React, { useContext } from 'react'

// creating context using react
const context = React.createContext<T | null>(null);

// React hook for context
useContext(context);

// React typing for Actions that can be dispatched
React.Dispatch<Action>

赞(0）回复(0）举报 2022-11-12

6jygbczu2#

我建议您使用[Zustand][1]来处理状态，而不是Redux或甚至Context api。
Zustand易于使用，包含的样板文件少得多。你也不需要将Zustand Package 在你的任何组件上。这给了你更多的自由，让你用更少的工作做更多的事情。
下面是一个例子：
在我的./商店内

import create from "zustand";
import { MyCustomType } from "./types";

export const cartStateStore = create<MyCustomType>((set) => ({
  open: false,
  setOpen: (val) => set(() => ({ open: val })),
}));

那么我可以将值导入到任何组件中并使用钩子：

import { MyCustomType  } from "../lib/store";

    const MyComponent = () => {
      const open = MyCustomType ((state) => state.open);
      const setOpen = MyCustomType ((state) => state.setOpen);

//setOpen(true)
//console.log(open)
    }

就这么简单。不需要Redux/contextapi [1]附带的所有样板文件：https://github.com/pmndrs/zustand

赞(0）回复(0）举报 2022-11-12

我来回答

redux 如何从任何组件访问任何属性和功能

2条答案

相关问题

热门标签

最新问答