适当反应元件使用情况
问题描述:
我有一个使用React和Redux的项目。我有多个React组件,需要使用一种常用的方法,它会从Redux Store中抓取数据,构建请求对象并向服务器发出休息请求。适当反应元件使用情况
我不想写这样做的方法不止一次。那么,这个方法应该是它自己的React组件,还是我应该把它放在一个通用的JavaScript文件中?如果您不渲染任何JSX,我不确定组件的要点。另一方面,如果我将它放在一个通用的JavaScript文件中,是否可以将redux连接到该文件以访问存储中的状态?
在此先感谢。
答
添加redux-thunk
中间件可让您调度功能,然后访问dispatch
和getState()
。从那里你可以做任何你想做的事情,比如使用选择器函数来提取你需要的状态,并进行AJAX调用。形实转换动作创作者可以传递给组件的道具,包括他们结合自动调度:
function someThunk() {
return (dispatch, getState) => {
const state = getState();
// do anything you want here
}
}
const actions = {doStuffOnClick : someThunk};
export default connect(mapState, actions)(MyComponent);
更多资源:
-
redux-thunk
在其回购在https://github.com/gaearon/redux-thunk描述。 - 我有一个要点,演示https://gist.github.com/markerikson/ea4d0a6ce56ee479fe8b356e099f857e一些常见的thunk使用模式。
- 我的React/Redux links list有链接到讨论Redux Side Effects类别中的thunk和副作用的文章。
答
它不应该是一个组件,因为如你所说,它没有视觉方面。
创建一个新的动作,即可做到这一点,并从您需要的任何地方派发动作。此操作可以检查商店以查看操作是否已经发生,然后什么都不做(或刷新)。
使用import {createStore} from 'redux'
的模块创建您的商店。将操作模块中创建的商店导入并使用store.getState()检查商店的当前状态。
一致认为,当我们需要访问Redux状态的常用方法时,thunk看起来会起作用。伟大的信息知道。但是,我的同事提醒我,我们可以用这个来渲染JSX。这是'提交'按钮。所以,我认为*毕竟这个例子中的组件是有意义的。 – nikotromus