标签: store

在每个文件中，都有一组已定义Proptypes的组件将使用该文件中的组件。例如：

    const Drafts = React.createClass({
       propTypes: {
         drafts: React.PropTypes.array.isRequired
       },

       mixins: [State, Navigation],

       render() { 
       ...
      }
    });

我要grep做什么？“草稿”？那是无效的。我还能如何找出store该变量来自哪个？

我试图将商店实例(商店状态)放在反应组件之外,即在单独的帮助器函数中.我有我的减速机,我的动作,我在最上面的组件中创建了一个商店.

// configStore.js

import { createStore } from 'redux';
import generalReducers from '../reducers/generalReducers';

export default function configStore(initialState) {
    return createStore(generalReducers, initialState);
}

// index.js


import { Provider } from 'react-redux';
import configStore from './store/configStore';

const initialReduxStoreConfig = {
    unit: 'm2',
    language: 'en'
}

const store = configStore(initialReduxStoreConfig);

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

// helpers.js

import configStore from '../store/configStore';

const store = configStore();

function getTranslation(key, lang = null) {
  console.log(store.getState());
}

这种方法不起作用,因为console.log(store.getState())返回undefined.但是,如果我将initialConfig传递给configStore(),它会构建一个新的商店,一切正常.

感谢帮助.

假设，我想为我的应用程序保留一些不可序列化的数据，用户可以跨应用程序访问这些数据并与之交互。例如，连接的设备（蓝牙、无线局域网）、媒体流等。我想知道在使用 Redux 范式时将这些数据放在哪里？

伪代码：

订阅的正常生命周期可能如下所示：

Subscription connection = instance.connect(device, request).listen();
...
connection.send(data);
...
data = connection.read();
...
connection.unsubscribe();

应用商店可能看起来像这样：

店铺：

{
  username: '',
  friends:[],      <--- Pulled from the server with async middleware
  connections:[],  <--- Connections data here ???
}

但是我会继续说，这样的设备订阅或媒体流是不可序列化的，因此将它们保存在 Redux Appstate 中是不合适的。

而且我知道，例如对于服务器请求，鼓励使用中间件。因此，对于用户的朋友，可以编写异步操作以在用户登录时从服务器中提取朋友的用户名。但是状态中的设备 id 不会这样做，因为人们必须实际与应用程序中的设备连接流进行交互。

那么编写一个单独的中间件是否是一种可以接受的保存这些数据的方式呢？这里的常见做法是什么？

我正在做一个带有商店的 Todo 应用程序。现在一切都很好，但我想对商店中的商品进行排序，或者也许显示它们已订购。商店是一个数组，商店中的所有项目都是一个带有键的对象：text、id、editing、line、checkboxed。所以“checkboxed”是一个布尔值，我希望所有“checkboxed：true”对象都位于数组中的第一个。我怎样才能做到呢？或者也许：我如何对 svelte-store-array 中的项目进行一般排序？谢谢 ！！！！

链接到应用程序

我正在使用 Vuex，而且我对它还很陌生。我想将数据提交到存储并用有效负载的内容替换状态。

我的商店是使用模块构建的，有问题的模块是用户模块，

目前我正在做类似我的突变的事情，

setUser(state, payload) {
    state.user = {...payload.user}
}

这使得我的状态在运行提交后看起来像这样

user: {
   user: {
     nickname: 'Bob',
     host: true,
     emoji: 'Smile',
     passcode: 12345678,
     room_id: 123
   }
}

理想情况下，我不想在用户对象中包含用户对象，我要么希望用户的每个属性成为状态的一部分，例如，

state : {
    nickname: 'Bob',
    host: true,
    emoji: 'Smile',
    passcode: 12345678,
    room_id: 123
}

或者它可能看起来像这样，

state : {
    user: {
        nickname: 'Bob',
        host: true,
        emoji: 'Smile',
        passcode: 12345678,
        room_id: 123
    }
}

我不明白为什么我会得到state.user.user？

这是我所在州的用户模块，

export default {
state: {
    user: {}
},
mutations: {
    setUser(state, payload) {
        state.user = …

我正在制作一个小型 mixin，用于根据用户如何爬行页面来驱动动画，并且我需要从该 mixin 访问存储在 Vuex 存储中的数据。任何 ide 如何从 vuex 存储传递数据，我很生气。

页面/index.vue

import Vue from 'vue'
import {ToplevelAnimations} from '~/mixins/toplevel_animations'

export default Vue.extend({

    mixins: [
       ToplevelAnimations
    ]
        
})

mixins/toplevel_animations.js

 export const ToplevelAnimations = {

    transition(to, from) { 
        // some logic, here I need to access routes stored in store
        return (to_index < from_index ? 'switch-to-left' : 'switch-to-right');
    }
   
}

商店/index.js

import {StoreExtensions} from "~/plugins/store_extensions.js";

export const state = () => ({

    MAIN_NAV_LINKS: [
        {
            path: '/',
            title: 'Domov',
            order: 1
        }, …

我使用 a 开发了一个自定义角度商店，BehaviorSubject并且使用如下：

export class UserFaceComponent {

    @Input()
    public id: any;

    public presence$: Observable<boolean>;

    constructor(private _store: Store) { }

    public ngOnInit() {
        this.presence$ = this._store
            .select(s => s.users.presences)
            .pipe(
                map(p => p.includes(this.id))
            );
    }
}

这样，当存储更改时，presence$可观察对象会发出新值。它工作得很好，但是，id传递给组件的也可能会改变。假设页面上有一个用户列表，当用户选择其中一个时，它会更新传递selectedUserId给UserFaceComponent. 这将是与以前相同的组件，但id会更新。

这意味着我必须在组件中创建一个主题，订阅钩子onChange并在 id 更改时发出该主题。然后，我必须将此可观察值与上面的可观察值合并，然后发出新值。

这可行，但非常麻烦，我不想被迫为用这种方法制作的每个组件执行此操作...我考虑了一段时间，但我找不到另一个解决方案来解决这个问题...

我的 Nuxt.js 设置遇到一些奇怪的问题。Store 中的某些状态不是持久的，每次我加载另一个视图时，它们都会回到默认值。

页面/test.vue

<template>
  <section class="section">
    <b-container>
      <b-row>
        <b-col cols=12>
          <b-button @click="setTest" variant="dark">test</b-button> | {{this.$store.state.test}} |
        </b-col>
      </b-row>
    </b-container>
  </section>
</template>

<script>
export default {
  name: 'test',
  methods: {
    setTest() {
      this.$store.commit("setTest")
    },
  }
}
</script>

商店/index.js

export const state = () => ({
  test: "test"
})

export const mutations = {
  setTest: (state) => state.test = 'Hello'
}

测试场景是点击“测试”按钮，调用带有突变提交“setTest”的方法，将状态设置为“Hello”。目前它工作正常，但如果我更改视图或重新加载页面，状态将设置为默认“测试”。

我究竟做错了什么？

我已经使用简单的 MobX 商店构建了一个基本的计数器 React 应用程序。我能够使用创建可观察的 MobX 状态，makeObservable但由于某种原因，当我尝试使用时makeAutoObservable出现错误

Cannot read property 'counter' of undefined

我怎么使用makeAutoObservable不正确？

店铺

import { makeAutoObservable, makeObservable, action, observable } from "mobx";

class SampleStore {
  counter = 0;

  constructor(arg) {
    makeAutoObservable(this);
    // makeObservable(this, {
    //   counter: observable,
    //   increment: action.bound,
    //   decrement: action.bound,
    // });
  }

  increment() {
    this.counter++;
    return this.counter;
  }

  decrement() {
    this.counter--;
    return this.counter;
  }
}

export default SampleStore;

useStore 钩子

import { createContext, useContext } from "react";

import …

这里有这家商店：

interface Task {
  id?: string;
  name: string;
  done: boolean;
}

interface TodoState {
  tasks: Task[];
  loading: boolean;
}

export const useTodoStore = defineStore({
  id: 'todo',
  state: (): TodoState => ({
    tasks: [],
    loading: false,
  }),
  getters: {},
  actions: {
    async addTask(name: string): Promise<void> {
      this.loading = true;
      this.tasks.push({ name, done: false, id: generateID() });
      await sleep(200);
      this.loading = false;
    },
  },
});

我不明白为什么当我将鼠标悬停在操作中的“任务”时，其类型不是 Task[] 但我得到

(property) tasks: {
    id?: string | undefined;
    name: string;
    done: boolean;
}[]

如果需要的话，这是 stackblitz …