blocks|key|4431372|text|我想指出的是，从存储中读取并不是那么糟糕--根据存储来决定应该做什么可能比将所有内容都传递给组件然后作为函数的参数要方便得多。我完全同意Dan的观点，那就是最好不要将store作为单例使用，除非你百分之百确定你将只用于客户端渲染(否则可能会出现难以跟踪的bug)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4431373|I+have+created+a+library最近处理冗长的redux，我认为把所有的东西都放在中间件中是个好主意，这样你就可以把所有的东西都作为依赖注入。|offset|length|4431374|因此，您的示例将如下所示：|4431375|import+{+createSyncTile+}+from+'redux-tiles';

const+someTile+=+createSyncTile({
++type:+['some',+'tile'],
++fn:+({+params,+selectors,+getState+})+=>+{
++++return+{
++++++data:+params.data,
++++++items:+selectors.another.tile(getState())
++++};
++},
});|code-block|syntax|javascript|4431376|但是，正如您所看到的，我们并不是真的在这里修改数据，所以我们很有可能只在其他地方使用这个选择器，在其他地方组合它。|4431377|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Bloomca/redux-tiles^0|0|0|O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I would like to point out that it is not that bad to read from the store -- it might be just much more convenient to decide what should be done based on the store, than to pass everything to the component and then as a parameter of a function. I agree with Dan completely, that it is much better not to use store as a singletone, unless you are 100% sure that you will use only for client-side rendering (otherwise hard to trace bugs might appear).

<a href="https://github.com/Bloomca/redux-tiles" rel="nofollow noreferrer">I have created a library</a> recently to deal with verbosity of redux, and I think it is a good idea to put everything in the middleware, so you have everyhing as a dependency injection.

So, your example will look like that:

<pre><code>import { createSyncTile } from 'redux-tiles';

const someTile = createSyncTile({
 type: ['some', 'tile'],
 fn: ({ params, selectors, getState }) =&gt; {
 return {
 data: params.data,
 items: selectors.another.tile(getState())
 };
 },
});
</code></pre>

However, as you can see, we don't really modify data here, so there is a good chance that we can just use this selector in other place to combine it somewhere else.

blocks|key|4431796|text|我同意@Bloomca。将存储中所需的值作为参数传递到分派函数中似乎比导出存储更简单。我在这里举了一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4431797|import+React+from+"react";
import+{connect}+from+"react-redux";
import+*+as+actions+from+'../actions';

class+App+extends+React.Component+{

++handleClick(){
++++const+data+=+this.props.someStateObject.data;
++++this.props.someDispatchFunction(data);
++}

++render(){
++++return+(
++++++<div>+++++++
++++++<div+onClick={+this.handleClick.bind(this)}>Click+Me!</div>++++++
++++++</div>
++++);
++}
}


const+mapStateToProps+=+(state)+=>+{
++return+{+someStateObject:+state.someStateObject+};
};

const+mapDispatchToProps+=+(dispatch)+=>+{
++return+{
++++someDispatchFunction:(data)+=>+{+dispatch(actions.someDispatchFunction(data))},

++};
}


export+default+connect(mapStateToProps,+mapDispatchToProps)(App);|code-block|syntax|javascript|4431798|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I agree with @Bloomca. Passing the value needed from the store into the dispatch function as an argument seems simpler than exporting the store. I made an example here: 

<pre><code>import React from "react";
import {connect} from "react-redux";
import * as actions from '../actions';

class App extends React.Component {

 handleClick(){
 const data = this.props.someStateObject.data;
 this.props.someDispatchFunction(data);
 }

 render(){
 return (
 &lt;div&gt; 
 &lt;div onClick={ this.handleClick.bind(this)}&gt;Click Me!&lt;/div&gt; 
 &lt;/div&gt;
 );
 }
}


const mapStateToProps = (state) =&gt; {
 return { someStateObject: state.someStateObject };
};

const mapDispatchToProps = (dispatch) =&gt; {
 return {
 someDispatchFunction:(data) =&gt; { dispatch(actions.someDispatchFunction(data))},

 };
}


export default connect(mapStateToProps, mapDispatchToProps)(App);
</code></pre>

blocks|key|4431545|text|提出了一种解决此问题的替代方法。这可能比Dan的解决方案更好，也可能更差，这取决于您的应用程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4431546|您可以通过将操作分成两个单独的功能来将状态从reducers获取到操作中:第一次请求数据，第二次对数据执行操作。您可以使用redux-loop来实现这一点。|offset|length|style|CODE|4431547|首先“请友好地询问数据”|4431548|export+const+SOME_ACTION+=+'SOME_ACTION';
export+function+someAction()+{
++++return+{
++++++++type:+SOME_ACTION,
++++}
}|code-block|syntax|javascript|4431549|在reducer中，截取ask并使用redux-loop将数据提供给第二阶段操作。|4431550|import+{+loop,+Cmd+}+from+'redux-loop';
const+initialState+=+{+data:+''+}
export+default+(state=initialState,+action)+=>+{
++++switch(action.type)+{
++++++++case+SOME_ACTION:+{
++++++++++++return+loop(state,+Cmd.action(anotherAction(state.data))
++++++++}
++++}
}|4431551|有了数据，就可以做最初想做的事情了|4431552|export+const+ANOTHER_ACTION+=+'ANOTHER_ACTION';
export+function+anotherAction(data)+{
++++return+{
++++++++type:+ANOTHER_ACTION,
++++++++payload:+data,
++++}
}|4431553|希望这对某些人有帮助。|4431554|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/redux-loop/redux-loop^0|0|1P|A|1P|A|0|0|0|0|I|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1K|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

Presenting an alternative way of solving this. This may be better or worse than Dan's solution, depending on your application.

You can get the state from the reducers into the actions by splitting the action in 2 separate functions: first ask for the data, second act on the data. You can do that by using <a href="https://github.com/redux-loop/redux-loop" rel="nofollow noreferrer"><code>redux-loop</code></a>.

First 'kindly ask for the data'

<pre><code>export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
 return {
 type: SOME_ACTION,
 }
}
</code></pre>

In the reducer, intercept the ask and provide the data to the second stage action by using <code>redux-loop</code>.

<pre><code>import { loop, Cmd } from 'redux-loop';
const initialState = { data: '' }
export default (state=initialState, action) =&gt; {
 switch(action.type) {
 case SOME_ACTION: {
 return loop(state, Cmd.action(anotherAction(state.data))
 }
 }
}
</code></pre>

With the data in hand, do whatever you initially wanted

<pre><code>export const ANOTHER_ACTION = 'ANOTHER_ACTION';
export function anotherAction(data) {
 return {
 type: ANOTHER_ACTION,
 payload: data,
 }
}
</code></pre>

Hope this helps someone.

blocks|key|4431911|text|我知道我来得太晚了，但我来到这里是为了了解我自己在行动中使用状态的愿望，然后形成了我自己的想法，当我意识到我认为什么是正确的行为时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4431912|这就是选择器对我来说最有意义的地方。发出这个请求的组件应该被告知是否是时候通过选择发出它了。|4431913|export+const+SOME_ACTION+=+'SOME_ACTION';
export+function+someAction(items)+{
++return+(dispatch)+=>+{
++++dispatch(anotherAction(items));
++}
}|code-block|syntax|javascript|4431914|这可能感觉像是在泄露抽象，但是您的组件显然需要发送一条消息，并且消息负载应该包含相关的状态。不幸的是，你的问题没有具体的例子，因为我们可以通过这样一个选择器和操作的“更好的模型”来工作。|4431915|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I know I'm late to the party here, but I came here for opinions on my own desire to use state in actions, and then formed my own, when I realized what I think is the correct behavior.

This is where a selector makes the most sense to me. Your component that issues this request should be told wether it's time to issue it through selection. 

<pre><code>export const SOME_ACTION = 'SOME_ACTION';
export function someAction(items) {
 return (dispatch) =&gt; {
 dispatch(anotherAction(items));
 }
}
</code></pre>

It might feel like leaking abstractions, but your component clearly needs to send a message and the message payload should contain pertinent state. Unfortunately your question doesn't have a concrete example because we could work through a 'better model' of selectors and actions that way.

blocks|key|4431953|text|我想推荐另一个我认为最干净的替代方案，但它需要react-redux或类似的东西-同时我还使用了其他一些奇特的功能：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4431954|//+actions.js
export+const+someAction+=+(items)+=>+({
++++type:+'SOME_ACTION',
++++payload:+{items},
});|code-block|syntax|javascript|4431955|//+Component.jsx
import+{connect}+from+"react-redux";

const+Component+=+({boundSomeAction})+=>+(<div
++++onClick={boundSomeAction}
/>);

const+mapState+=+({otherReducer:+{items}})+=>+({
++++items,
});

const+mapDispatch+=+(dispatch)+=>+bindActionCreators({
++++someAction,
},+dispatch);

const+mergeProps+=+(mappedState,+mappedDispatches)+=>+{
++++//+you+can+only+use+what+gets+returned+here,+so+you+dont+have+access+to+`items`+and+
++++//+`someAction`+anymore
++++return+{
++++++++boundSomeAction:+()+=>+mappedDispatches.someAction(mappedState.items),
++++}
});

export+const+ConnectedComponent+=+connect(mapState,+mapDispatch,+mergeProps)(Component);|4431956|//+(with++other+mapped+state+or+dispatches)+Component.jsx
import+{connect}+from+"react-redux";

const+Component+=+({boundSomeAction,+otherAction,+otherMappedState})+=>+(<div
++++onClick={boundSomeAction}
++++onSomeOtherEvent={otherAction}
>
++++{JSON.stringify(otherMappedState)}
</div>);

const+mapState+=+({otherReducer:+{items},+otherMappedState})+=>+({
++++items,
++++otherMappedState,
});

const+mapDispatch+=+(dispatch)+=>+bindActionCreators({
++++someAction,
++++otherAction,
},+dispatch);

const+mergeProps+=+(mappedState,+mappedDispatches)+=>+{
++++const+{items,+...remainingMappedState}+=+mappedState;
++++const+{someAction,+...remainingMappedDispatch}+=+mappedDispatch;
++++//+you+can+only+use+what+gets+returned+here,+so+you+dont+have+access+to+`items`+and+
++++//+`someAction`+anymore
++++return+{
++++++++boundSomeAction:+()+=>+someAction(items),
++++++++...remainingMappedState,
++++++++...remainingMappedDispatch,
++++}
});

export+const+ConnectedComponent+=+connect(mapState,+mapDispatch,+mergeProps)(Component);|4431957|如果您想重用它，您必须将特定的mapState、mapDispatch和mergeProps提取到函数中以便在其他地方重用，但这使得依赖关系非常清晰。|4431958|entityMap^0|N|B|0|0|0|0|F|8|O|B|10|A|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

I would like to suggest yet another alternative that I find the cleanest, but it requires <code>react-redux</code> or something simular - also I'm using a few other fancy features along the way:

<pre class="lang-js prettyprint-override"><code>// actions.js
export const someAction = (items) =&gt; ({
 type: 'SOME_ACTION',
 payload: {items},
});
</code></pre>

<pre><code>// Component.jsx
import {connect} from "react-redux";

const Component = ({boundSomeAction}) =&gt; (&lt;div
 onClick={boundSomeAction}
/&gt;);

const mapState = ({otherReducer: {items}}) =&gt; ({
 items,
});

const mapDispatch = (dispatch) =&gt; bindActionCreators({
 someAction,
}, dispatch);

const mergeProps = (mappedState, mappedDispatches) =&gt; {
 // you can only use what gets returned here, so you dont have access to `items` and 
 // `someAction` anymore
 return {
 boundSomeAction: () =&gt; mappedDispatches.someAction(mappedState.items),
 }
});

export const ConnectedComponent = connect(mapState, mapDispatch, mergeProps)(Component);
</code></pre>

<pre><code>// (with other mapped state or dispatches) Component.jsx
import {connect} from "react-redux";

const Component = ({boundSomeAction, otherAction, otherMappedState}) =&gt; (&lt;div
 onClick={boundSomeAction}
 onSomeOtherEvent={otherAction}
&gt;
 {JSON.stringify(otherMappedState)}
&lt;/div&gt;);

const mapState = ({otherReducer: {items}, otherMappedState}) =&gt; ({
 items,
 otherMappedState,
});

const mapDispatch = (dispatch) =&gt; bindActionCreators({
 someAction,
 otherAction,
}, dispatch);

const mergeProps = (mappedState, mappedDispatches) =&gt; {
 const {items, ...remainingMappedState} = mappedState;
 const {someAction, ...remainingMappedDispatch} = mappedDispatch;
 // you can only use what gets returned here, so you dont have access to `items` and 
 // `someAction` anymore
 return {
 boundSomeAction: () =&gt; someAction(items),
 ...remainingMappedState,
 ...remainingMappedDispatch,
 }
});

export const ConnectedComponent = connect(mapState, mapDispatch, mergeProps)(Component);
</code></pre>

If you want to reuse this you'll have to extract the specific <code>mapState</code>, <code>mapDispatch</code> and <code>mergeProps</code> into functions to reuse elsewhere, but this makes dependencies perfectly clear.

blocks|key|4431744|text|我不会在Action+Creator中访问状态。我将使用mapStateToProps()并导入整个状态对象，然后在Action+Creator最终要使用的组件中导入一个combinedReducer文件(或import+*+from+'./reducers';)。然后在组件中使用解构，以使用状态属性中所需的任何内容。如果Action+Creator将状态传递给给定类型的Reducer，则无需提及state，因为reducer可以访问当前在state中设置的所有内容。您的示例没有更新任何内容。我只会使用Action+Creator来传递来自其参数的状态。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4431745|在reducer中执行类似以下操作：|4431746|const+state+=+this.state;
const+apple+=+this.state.apples;|code-block|syntax|javascript|4431747|如果需要对引用的类型的状态执行操作，请在reducer中执行。|4431748|如果我错了，请纠正我！|4431749|entityMap^0|2W|R|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

I wouldn't access state in the Action Creator. I would use mapStateToProps() and import the entire state object and import a combinedReducer file (or <code>import * from './reducers';</code>) in the component the Action Creator is eventually going to. Then use destructuring in the component to use whatever you need from the state prop. If the Action Creator is passing the state onto a Reducer for the given TYPE, you don't need to mention state because the reducer has access to everything that is currently set in state. Your example is not updating anything. I would only use the Action Creator to pass along state from its parameters.
In the reducer do something like:
<pre><code>const state = this.state;
const apple = this.state.apples;
</code></pre>
If you need to perform an action on state for the TYPE you are referencing, please do it in the reducer.
Please correct me if I'm wrong!!!

Say I have the following:

<pre><code>export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
 return {
 type: SOME_ACTION,
 }
}
</code></pre>

And in that action creator, I want to access the global store state (all reducers). Is it better to do this:

<pre><code>import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
 return {
 type: SOME_ACTION,
 items: store.getState().otherReducer.items,
 }
}
</code></pre>

or this:

<pre><code>export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
 return (dispatch, getState) =&gt; {
 const {items} = getState().otherReducer;

 dispatch(anotherAction(items));
 }
}
</code></pre>

Accessing Redux state in an action creator?

中间件

JSON

假设我有以下内容：export const SOME_ACTION = 'SOME_ACTION';export function someAction() {  return {    type: SOME_ACTION,  }}在该操作创建器中，我希望访问全局存储状态(所有缩减程序)。这样做更好吗：import s...

问在动作创建者中访问Redux状态？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在动作创建者中访问Redux状态？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在动作创建者中访问Redux状态？
EN