Redux: रेड्यूसर और कंपोनेंट एन्हांसर के रूप में जेनेरिक सूची कैसे बनाएं?

मैं सहमत हूं कि यह एक अच्छा उदाहरण है।
रेडक्स यहां एल्म आर्किटेक्चर के समान है, इसलिए वहां के उदाहरणों से प्रेरित होने के लिए स्वतंत्र महसूस करें।

किसी भी प्रकार की संस्थाओं को इकट्ठा करने के लिए कोई सामान्यीकृत सूची स्टोर + घटक कैसे बनाएगा? क्या काउंटर और टूडू-आइटम दोनों को todomvc-example से लेने के लिए सूची स्टोर + घटक को और भी सामान्य बनाना संभव होगा?

हाँ, निश्चित रूप से संभव है।
आप एक उच्च ऑर्डर रेड्यूसर और एक उच्च ऑर्डर घटक बनाना चाहते हैं।

उच्च ऑर्डर रेड्यूसर के लिए यहां दृष्टिकोण देखें:

function list(reducer, actionTypes) {
  return function (state = [], action) {
    switch (action.type) {
    case actionTypes.add:
      return [...state, reducer(undefined, action)];
    case actionTypes.remove:
      return [...state.slice(0, action.index), ...state.slice(action.index + 1)];
    default:
      const { index, ...rest } = action;
      if (typeof index !== 'undefined') {
        return state.map(item => reducer(item, rest));
      }
      return state;
    }
  }
}

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return counter + 1;
  case 'DECREMENT':
    return counter - 1;
  }
}

const listOfCounters = list(counter, {
  add: 'ADD_COUNTER',
  remove: 'REMOVE_COUNTER'
});

const store = createStore(listOfCounters);
store.dispatch({
  type: 'ADD_COUNTER'
});
store.dispatch({
  type: 'ADD_COUNTER'
});
store.dispatch({
  type: 'INCREMENT',
  index: 0
});
store.dispatch({
  type: 'INCREMENT',
  index: 1
});
store.dispatch({
  type: 'REMOVE_COUNTER',
  index: 0
});

(मैंने इसे नहीं चलाया है, लेकिन इसे न्यूनतम परिवर्तनों के साथ काम करना चाहिए।)

धन्यवाद - मैं इस दृष्टिकोण को काम करने की कोशिश करूंगा।

मैं अभी भी सोच रहा हूं कि क्या मैं काउंटरों की सूची और टूडू-आइटम की सूची दोनों के लिए combineReducers के माध्यम से सूची कार्यक्षमता का पुन: उपयोग कर सकता हूं। और अगर यह समझ में आता है। लेकिन मैं इसे जरूर आजमाऊंगा।

मैं अभी भी सोच रहा हूं कि क्या मैं काउंटर की सूची और टूडू-आइटम की सूची दोनों के लिए कंबाइन रेड्यूसर के माध्यम से सूची कार्यक्षमता का पुन: उपयोग कर सकता हूं। और अगर यह समझ में आता है। लेकिन मैं इसे जरूर आजमाऊंगा।

हाँ, बिलकुल:

const reducer = combineReducers({
  counterList: list(counter, {
    add: 'ADD_COUNTER',
    remove: 'REMOVE_COUNTER'
  }),
  todoList: list(counter, {
    add: 'ADD_TODO',
    remove: 'REMOVE_TODO'
  }),
});

@gaearon सूची कार्रवाई को अपना index कैसे प्राप्त करना चाहिए?

हम आपके निर्देशों के साथ एक उच्च ऑर्डर रेड्यूसर बनाने में कामयाब रहे लेकिन हम उच्च ऑर्डर घटक के साथ संघर्ष कर रहे हैं। वर्तमान में हमारा घटक काउंटर के अलावा अन्य घटकों के साथ उपयोग करने के लिए पर्याप्त सामान्य नहीं है। हमारा मुद्दा यह है कि इंडेक्स को सामान्य तरीके से क्रियाओं में कैसे जोड़ा जाए।

आप हमारा समाधान यहां देख सकते हैं: https://github.com/Zeikko/redux/commit/6a222885c8c93950dbdd0d4cf3532cd99a32206c

मैंने समस्याग्रस्त भाग को उजागर करने के लिए कुछ टिप्पणी को कमिट में जोड़ा।

एक सामान्य सूची रेड्यूसर + घटक होना बहुत अच्छा होगा जो काउंटरों की सूचियों की सूची कर सकता है।

वर्तमान में हमारा घटक काउंटर के अलावा अन्य घटकों के साथ उपयोग करने के लिए पर्याप्त सामान्य नहीं है। हमारा मुद्दा यह है कि इंडेक्स को सामान्य तरीके से क्रियाओं में कैसे जोड़ा जाए।

क्या आप बता सकते हैं कि "इंडेक्स को सामान्य तरीके से जोड़ने" से आपका क्या मतलब है? क्या आपका मतलब है कि आप कार्रवाई में index कुंजी के लिए अलग-अलग नाम रखना चाहते हैं?

मुझे लगता है कि मुझे अब तुम्हारा मतलब मिल गया है।

क्षमा करें, मैं अभी अधिक टिप्पणी करने में सक्षम नहीं हूँ। मैं कल वापस आऊंगा।

मैं अब समस्या को समझता हूं। इसमें देख रहे हैं।

रेडक्स एल्म आर्किटेक्चर से कैसे विचलित होता है, इसमें निहित कुछ सीमाओं में मैं जल्दी से टकरा गया।
यह अफ़सोस की बात है कि मैंने उन्हें पहले नहीं समझा!

• जब तक घटक लपेटा जाता है, तब तक उसे dispatch प्रोप स्वीकार करने की आवश्यकता होती है न कि कॉलबैक। इसका मतलब है कि आपको या तो एक्शन क्रिएटर्स को अपना प्रॉप्स बनाने से बचना होगा और केवल dispatch() का उपयोग कंपोज़ किए गए घटकों में करना होगा, या हमें एक bindActionCreators(Component, actionCreators) => Component पेश करना होगा जो कि connect() जैसा है। लेकिन वास्तव में स्टोर से कनेक्ट नहीं होता है, इसके बजाय केवल this.props.dispatch -wanting-component के साथ action-creator-as-props-wanting-component की जगह लेता है।
• आप लिपटे घटकों से मिडलवेयर-आवश्यक क्रियाओं को नहीं भेज सकते हैं। यह एक बकवास है! अगर मैं एक सूची के साथ काउंटर लपेटता हूं, तो मैं अब incrementAsync() प्रेषण नहीं कर सकता क्योंकि function (dispatch, getState) { ... } मैंने अभी-अभी भेजा है सूची द्वारा { action: function (dispatch, getState) { ... } } में बदल दिया गया है - और bam! थंक मिडलवेयर अब इसे नहीं पहचानता है।

इसके गैर-अजीब समाधान हो सकते हैं, लेकिन मैं उन्हें अभी तक नहीं देखता हूं।
अभी के लिए, कृपया इस प्रतिबद्धता को एक उदाहरण के रूप में देखें (ऊपर वर्णित सीमाओं के साथ)।

यहाँ कोड है:

घटक/काउंटर.जेएस

import React, { Component, PropTypes } from 'react';
import { increment, incrementIfOdd, incrementAsync, decrement } from '../actions/counter';

class Counter extends Component {
  render() {
    const { dispatch, counter } = this.props;
    return (
      <p>
        Clicked: {counter} times
        {' '}
        <button onClick={() => dispatch(increment())}>+</button>
        {' '}
        <button onClick={() => dispatch(decrement())}>-</button>
        {' '}
        <button onClick={() => dispatch(incrementIfOdd())}>Increment if odd</button>
        {' '}
        <button onClick={() => dispatch(incrementAsync())}>Increment async</button>
      </p>
    );
  }
}

Counter.propTypes = {
  dispatch: PropTypes.func.isRequired,
  counter: PropTypes.number.isRequired
};

export default Counter;

घटक/सूची.जेएस

import React, { Component, PropTypes } from 'react';
import { addToList, removeFromList, performInList } from '../actions/list';

export default function list(mapItemStateToProps) {
  return function (Item) {
    return class List extends Component {
      static propTypes = {
        dispatch: PropTypes.func.isRequired,
        items: PropTypes.array.isRequired
      };

      render() {
        const { dispatch, items } = this.props;
        return (
          <div>
            <button onClick={() =>
              dispatch(addToList())
            }>Add counter</button>

            <br />
            {items.length > 0 &&
              <button onClick={() =>
                dispatch(removeFromList(items.length - 1))
              }>Remove counter</button>
            }
            <br />
            {this.props.items.map((item, index) =>
              <Item {...mapItemStateToProps(item)}
                    key={index}
                    dispatch={action =>
                      dispatch(performInList(index, action))
                    } />
            )}
          </div>
        )
      }
    }
  };
}

कार्रवाई/काउंटर.जेएस

export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

export function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

export function decrement() {
  return {
    type: DECREMENT_COUNTER
  };
}

export function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

export function incrementAsync(delay = 1000) {
  return dispatch => {
    setTimeout(() => {
      dispatch(increment());
    }, delay);
  };
}

क्रिया/सूची.जेएस

export const ADD_TO_LIST = 'ADD_TO_LIST';
export const REMOVE_FROM_LIST = 'REMOVE_FROM_LIST';
export const PERFORM_IN_LIST = 'PERFORM_IN_LIST';

export function addToList() {
  return {
    type: ADD_TO_LIST
  };
}

export function removeFromList(index) {
  return {
    type: REMOVE_FROM_LIST,
    index
  };
}

export function performInList(index, action) {
  return {
    type: PERFORM_IN_LIST,
    index,
    action
  };
}

रेड्यूसर/काउंटर.जेएस

import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter';

export default function counter(state = 0, action) {
  switch (action.type) {
  case INCREMENT_COUNTER:
    return state + 1;
  case DECREMENT_COUNTER:
    return state - 1;
  default:
    return state;
  }
}

रेड्यूसर/सूची.जेएस

import { ADD_TO_LIST, REMOVE_FROM_LIST, PERFORM_IN_LIST } from '../actions/list';

export default function list(reducer) {
  return function (state = [], action) {
    const {
      index,
      action: innerAction
    } = action;

    switch (action.type) {
    case ADD_TO_LIST:
      return [
        ...state,
        reducer(undefined, action)
      ];
    case REMOVE_FROM_LIST:
      return [
        ...state.slice(0, index),
        ...state.slice(index + 1)
      ];
    case PERFORM_IN_LIST:
      return [
        ...state.slice(0, index),
        reducer(state[index], innerAction),
        ...state.slice(index + 1)
      ];
    default:
      return state;
    }
  }
}

रेड्यूसर/index.js

import { combineReducers } from 'redux';
import counter from './counter';
import list from './list'

const counterList = list(counter);

const rootReducer = combineReducers({
  counterList
});

export default rootReducer;

कंटेनर/App.js

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import Counter from '../components/Counter';
import list from '../components/list';

const CounterList = list(function mapItemStateToProps(itemState) {
  return {
    counter: itemState
  };
})(Counter);

export default connect(function mapStateToProps(state) {
  return {
    items: state.counterList
  };
})(CounterList);

cc @acdlite - यहाँ वर्तमान मिडलवेयर का एक उदाहरण है + रिएक्ट रेडक्स डिज़ाइन कुछ हद तक टूट रहा है।
हम इसे अभ्यस्त के रूप में घोषित कर सकते हैं लेकिन हो सकता है कि आप देखना चाहें कि क्या कोई तरीका है जिससे हम इसे चकमा दे सकते हैं।

चाहेंगे
https://github.com/erikras/multireducer/ सहायता?

मैं प्रतिक्रिया के लिए एक सेवा (आईओसी) कंटेनर के उपयोग के साथ प्रयोग कर रहा हूं, और कल यह परीक्षण-रेपो बनाया: https://github.com/magnusjt/react-ioc

मुझे लगता है कि यह संभावित रूप से समस्या का हिस्सा हल कर सकता है, क्योंकि आप काउंटरलिस्ट को इसके बारे में जाने बिना काउंटर पर एक एक्शन निर्माता को पास कर सकते हैं। यह संभव है क्योंकि एक्शन क्रिएटर काउंटर के लिए कंस्ट्रक्टर में जाता है, प्रॉपर में नहीं।

आपके द्वारा बनाए गए प्रत्येक नए काउंटर घटक के लिए, आप एक अलग एक्शन क्रिएटर पास कर सकते हैं (शायद एक्शन क्रिएटर के लिए एक इंडेक्स वैल्यू को बाइंड करके)। बेशक आपको अभी भी काउंटर पर डेटा प्राप्त करने में समस्या है। मुझे अभी तक यकीन नहीं है कि ऐसा कुछ है जिसे सर्विस कंटेनर से हल किया जा सकता है।

@gaearon , आपका उदाहरण मेरे लिए सही दिखता है। आपको एक्शन क्रिएटर्स को पास करना होगा और सभी तरह से नीचे भेजना होगा। इस तरह आप उच्च-क्रम के कार्यों के साथ क्रियाओं को बदल सकते हैं।

मुझे यकीन नहीं है कि आपका दूसरा बिंदु आवश्यक है। नए संदेश प्रारूप के कारण आप मिडलवेयर से चूक जाएंगे, लेकिन performInList के साथ एक बड़ी समस्या यह है कि आपने अमूर्तता को केवल एक सूची तक सीमित कर दिया है। @ pe3 ने काउंटरों की सूचियों की एक सूची का उल्लेख किया। इस तरह मनमाने ढंग से अमूर्तता के लिए, मुझे लगता है कि आपको किसी भी तरह की क्रियाओं को घोंसला बनाना होगा।

इस टिकट में, मैं घोंसले के प्रकारों के लिए एक तरीका लेकर आया हूं:
https://github.com/rackt/redux/issues/897

लेकिन मुझे लगता है कि अधिक मौलिक रूप से, आप क्रियाओं को पूरी तरह से घोंसला बनाना चाहेंगे ....

ठीक है, मैंने अभी इसे जाना था।

मैंने चीजों को काफी सरल किया। इस फैंसी सामान को करने से पहले यहां काउंटर ऐप है:

https://github.com/ccorcos/redux-lifted-reducers/blob/80295a09c4d04654e6b36ecc8bc1bfac4ae821c7/index.js#L49

और यहाँ इसके बाद है:

https://github.com/ccorcos/redux-lifted-reducers/blob/1fdafe8ed29303822018cde4973fda3305b43bb6/index.js#L57

मुझे यकीन नहीं है कि "लिफ्ट" उचित शब्द है - मुझे पता है कि इसका मतलब कार्यात्मक प्रोग्रामिंग में कुछ है, लेकिन मुझे ठीक लगा।

मूल रूप से, एक क्रिया को उठाकर, आप एक क्रिया को दूसरे के भीतर घोंसला बना रहे हैं।

const liftActionCreator = liftingAction => actionCreator => action => Object.assign({}, liftingAction, { nextAction: actionCreator(action) })

और नेस्टेड क्रिया रेड्यूसर को उठाकर दूर हो जाती है। लिफ्टिंग रिड्यूसर मूल रूप से सब-रेड्यूसर (जो आंशिक रूप से उपयुक्त कार्रवाई के साथ लागू होता है) को कुछ सबस्टेट पर लागू करता है।

const liftReducer = liftingReducer => reducer => (state, action) => liftingReducer(state, action)((subState) => reducer(subState, action.nextAction))

तो घटक रेड्यूसर की सूची के लिए, मेरे पास एक क्रिया है जो निर्दिष्ट करती है कि उप-क्रिया किस घटक पर लागू होती है।

// list actions
const LIST_INDEX = 'LIST_INDEX'
function actOnIndex(i) {
  return {
    type: LIST_INDEX,
    index: i
  }
}

और मेरे पास एक "हाई-ऑर्डर" (एक और फैंसी शब्द है जो अभी सही लगा, हाहा;) रेड्यूसर जो उप-रेड्यूसर को उपयुक्त उप-राज्य पर लागू करता है।

const list = (state=[], action) => (reduce) => {
  switch (action.type) {
    case LIST_INDEX:
      let nextState = state.slice(0)
      nextState[action.index] = reduce(nextState[action.index])
      return nextState
    default:
      return state;
  }
}

और जो कुछ बचा है वह सूची रेड्यूसर में गिनती रेड्यूसर को "उठाना" है।

const reducer = combineReducers({
  counts: liftReducer(list)(count)
});

और अब काउंटरों की सूची के लिए, हमें कार्यों को उठाने की जरूरत है क्योंकि हम उन्हें काउंटरों तक पहुंचाते हैं।

class App extends Component {
  render() {
    const counters = [0,1,2,3,4].map((i) => {
      return (
        <Counter count={this.props.state.counts[i]}
                 increment={liftActionCreator(actOnIndex(i))(increment)}
                 decrement={liftActionCreator(actOnIndex(i))(decrement)}
                 dispatch={this.props.dispatch}
                 key={i}/>
      )
    })
    return (
      <div>
        {counters}
      </div>
    );
  }
}

मुझे लगता है कि इसे उचित लिंगो के साथ और अधिक औपचारिक रूप दिया जा सकता है। मुझे लगता है कि उच्च-क्रम वाले रेड्यूसर के लिए भी यहां लेंस का उपयोग किया जा सकता है, लेकिन मैंने कभी भी उनका सफलतापूर्वक उपयोग नहीं किया है, हाहा।

और मैंने पिछली टिप्पणी में जो कहा था, मैं उसे वापस लेता हूं - @gaearon सही है। इस तरह की कार्रवाई को नेस्ट करके, आप मिडलवेयर को याद करने जा रहे हैं, और आपको सभी तरह से डिस्पैच पास करना होगा ताकि आप एक्शन क्रिएटर्स में हेरफेर कर सकें। शायद इसका समर्थन करने के लिए, Redux को मिडलवेयर के माध्यम से सभी उप-क्रियाओं को लागू करना होगा। साथ ही, एक और मुद्दा राज्य को सूची में शुरू कर रहा है ...

आप जो वर्णन कर रहे हैं उसे एल्म आर्किटेक्चर के रूप में जाना जाता है। कृपया यहां देखें: https://github.com/gaearon/react-elmish-example

यार, तुम हमेशा एक कदम आगे हो! मुझे शांत सामग्री के लिंक के साथ स्नान करें: +1:

आप लिपटे घटकों से मिडलवेयर-आवश्यक क्रियाओं को नहीं भेज सकते हैं। यह एक बकवास है! यदि मैं एक सूची के साथ काउंटर लपेटता हूं, तो मैं अब वेतन वृद्धि नहीं भेज सकता () क्योंकि फ़ंक्शन (प्रेषण, गेटस्टेट) {...} मैंने अभी-अभी भेजा है {क्रिया: फ़ंक्शन (प्रेषण, गेटस्टेट) {...}} द्वारा सूची- और बेम! थंक मिडलवेयर अब इसे नहीं पहचानता है।

@gaearon इस समाधान के बारे में कैसे? जेनेरिक रिड्यूसर के बजाय खुद को चाइल्ड रिड्यूसर इस तरह कहते हैं

case PERFORM_IN_LIST:
      return [
        ...state.slice(0, index),
        reducer(state[index], innerAction),
        ...state.slice(index + 1)
      ];

स्टोर को कुछ विशेष विधि dispatchTo(reducer, state, action, callback) के साथ प्रदान करें जो dispatch की तरह कार्य करता है, सिवाय इसके कि यह सीधे एक बच्चे रेड्यूसर (सभी कॉन्फ़िगर किए गए मिडलवेयर के माध्यम से) को प्रेषित करता है और प्रत्येक बच्चे के राज्य संशोधन पर कॉलबैक को सूचित करता है

export default function list(reducer, dispatchTo) {
  return function (state = [], action) {
    ...
    case PERFORM_IN_LIST:
      dispatchTo(reducer, state[index], innerAction, newState =>
         [
           ...state.slice(0, index),
           newState,
           ...state.slice(index + 1)
        ]);
       default:
          return state;
    }
  }
}

मुझे पता नहीं है कि यह Redux में करने योग्य है या नहीं। एक विचार dispatchTo को कुछ आंतरिक store.derive(reducer, state) विधि का उपयोग करके कार्यान्वित करना है जो रूट स्टोर के रूप में कुछ मिडलवेयर के साथ कॉन्फ़िगर किए गए राज्य पेड़ के उस हिस्से के लिए एक बाल स्टोर लौटाएगा। उदाहरण के लिए

function dispatchTo(reducer, state, action, callback) {
  const childStore = store.derive(reducer, state)
  childStore.subscribe(() => setRootState( callback(getState() ))
  childStore.dispatch(action)
}

यह सिर्फ एक विचार है जैसा कि मैंने कहा था कि मुझे Redux के इंटर्नल के बारे में पता नहीं है इसलिए शायद मुझे कुछ याद आया

संपादित करें
_शायद यह अजीब होगा क्योंकि रेड्यूसर विधियों को तुल्यकालिक माना जाता है। एक विधि बनाने से async का तात्पर्य है कि सभी श्रृंखलाओं को भी async होना चाहिए।
हो सकता है कि सबसे अच्छा समाधान सीधे store.derive(reducer) विधि को उजागर करना और किसी प्रकार की स्टोर संरचना का उपयोग करके सामान्य रेड्यूसर बनाना है।

यह बहुत अधिक जटिलता है और आईएमओ के लायक नहीं है। यदि आप इसे इस तरह से करना चाहते हैं, तो बस मिडलवेयर का उपयोग न करें (या applyMiddleware के कुछ वैकल्पिक कार्यान्वयन का उपयोग करें) और आप पूरी तरह तैयार हैं।

साथ ही, मैं बंद कर रहा हूं क्योंकि हमारी इस पर कार्रवाई करने की कोई योजना नहीं है।

@gaearon चर्चा के लिए:
इस कमिट में आपके द्वारा संलग्न कोड उदाहरण: https://github.com/rackt/redux/commit/a83002aed8e36f901ebb5f139dd14ce9c2e4cab4

यदि मेरे पास काउंटरों की 2 सूचियां हैं (या अलग 'मॉडल' भी), तो addToList प्रेषण दोनों सूचियों में आइटम जोड़ देगा, क्योंकि क्रिया प्रकार समान हैं।

// reducers/index.js

import { combineReducers } from 'redux';
import counter from './counter';
import list from './list'

const counterList = list(counter);
const counterList2 = list(counter);

const rootReducer = combineReducers({
  counterList,
  counterList2
});

export default rootReducer;

तो reducers/list यहाँ कैसे मदद करता है? क्या आपको क्रिया प्रकार या कुछ उपसर्ग करने की आवश्यकता नहीं है?

यदि मेरे पास काउंटरों की 2 सूचियां हैं (या यहां तक ​​​​कि अलग 'मॉडल'), तो addToList प्रेषण दोनों सूचियों में आइटम जोड़ देगा, क्योंकि क्रिया प्रकार समान हैं।

कृपया a83002aed8e36f901ebb5f139dd14ce9c2e4cab4 पर करीब से नज़र डालें। यह क्रियाओं को घोंसला बनाता है। dispatch जो कंटेनर घटक से नीचे जाता है, क्रियाओं को performInList क्रिया में लपेटता है। फिर रेड्यूसर में आंतरिक क्रिया को पुनः प्राप्त किया जाता है। यह काफी हद तक एल्म आर्किटेक्चर कैसे काम करता है।

@gaearon शायद मुझे कुछ याद आ रहा है, लेकिन ऊपर उल्लिखित अतिरिक्त counterList2 रिड्यूसर के साथ, यह UI अभी भी प्रत्येक क्रिया पर दोनों सूचियों को अपडेट करता है (जो कि इसके निर्माण के अनुसार अपेक्षित है, लेकिन समाधान क्या है?):

// reducers/index.js

import { combineReducers } from 'redux';
import counter from './counter';
import list from './list'

const counterList = list(counter);
const counterList2 = list(counter);

const rootReducer = combineReducers({
  counterList,
  counterList2
});

export default rootReducer;


// containers/App.js

import React from 'react';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import counter from '../components/Counter';
import list from '../components/list';

let CounterList = list(function mapItemStateToProps(itemState) {
  return {
    counter: itemState
  };
})(counter);

CounterList = connect(function mapStateToProps(state) {
  return {
    items: state.counterList
  };
})(CounterList);

let CounterList2 = list(function mapItemStateToProps(itemState) {
  return {
    counter: itemState
  };
})(counter);

CounterList2 = connect(function mapStateToProps(state) {
  return {
    items: state.counterList2
  };
})(CounterList2);


export default class App extends React.Component {
  render() {
    return (
      <div>
        <CounterList />
        <CounterList2 />
      </div>
    )
  }
}

@elado आपको इसे फिर से एक सूची में लपेटने की आवश्यकता होगी ताकि क्रियाएं दो सूचियों के लिए संघर्ष न करें, ठीक उसी तरह जैसे हमने काउंटरों की सूची के साथ किया था

@ccorcos

इसे फिर से सूची में लपेटने के लिए

क्या लपेटो?

@ccorcos
मैंने यहां उदाहरण अपलोड किया है: http://elado.s3-website-us-west-1.amazonaws.com/redux-counter/
इसमें स्रोत मानचित्र हैं

अभी भी पूरी तरह से निश्चित नहीं है कि आपका क्या मतलब था। जैसा कि मैंने कहा - वर्तमान व्यवहार अपेक्षित है क्योंकि कार्रवाई के नाम समान हैं, और कार्रवाई निर्माता में कोई संकेत नहीं है कि किस सूची में इसे निष्पादित करना है, इसलिए यह सभी रेड्यूसर पर कार्रवाई चलाता है जो अंततः दोनों सूचियों को प्रभावित करता है।

इसलिए मैं वास्तविक Redux कार्यों को बहुत अच्छी तरह से नहीं जानता, लेकिन मैं एल्म से बहुत परिचित हूं।

इस नए उदाहरण में, हम एक्शन क्रिएटर्स को शीर्ष स्तर पर बाध्य नहीं कर रहे हैं। इसके बजाय, हम डिस्पैच फ़ंक्शन को निचले घटकों में पास करते हैं और वे निचले घटक डिस्पैच फ़ंक्शन में एक क्रिया पास कर सकते हैं।

एब्स्ट्रैक्शन को अच्छी तरह से काम करने के लिए ताकि हमारे पास एक्शन टकराव न हो, जब "लिस्टऑफ" घटक अपने बच्चों को प्रेषण पास करता है, तो यह वास्तव में एक फ़ंक्शन पास करता है जो एक प्रारूप में क्रिया को लपेटता है जिसे सूची घटक समझ सकता है।

children.map((child, i) => {
  childDispatch = (action) => dispatch({action, index: i})
  // ...

तो अब आप listOf(counter) या listOf(listOf(counter)) लिख सकते हैं और यदि आप pairOf नामक एक घटक बनाना चाहते हैं, तो जब आप उन्हें पास करते हैं तो आपको क्रियाओं को लपेटना सुनिश्चित करना होगा। अभी, App घटक केवल प्रेषण कार्यों को लपेटे बिना उन्हें कंधे से कंधा मिलाकर प्रस्तुत करता है, इस प्रकार आपके पास कार्रवाई टकराव है।

@ccorcos

धन्यवाद। तो निष्कर्ष निकालने के लिए, स्पष्ट रूप से कोई "जादू" नहीं हो रहा है, क्रियाओं को उन सभी सूचनाओं की आवश्यकता होती है जो उन्हें रिड्यूसर को बताने के लिए आवश्यक होती हैं कि किस उदाहरण पर कार्रवाई करनी है। यदि यह listOf(listOf(counter)) है तो कार्रवाई के लिए 2d सरणी के दोनों सूचकांकों की आवश्यकता होगी। listOf(listOf(counter)) काम कर सकता है लेकिन सभी काउंटरों को एक ही फ्लैट सूची में अद्वितीय आईडी द्वारा अनुक्रमित किया जा रहा है जो कि एक क्रिया में पारित एकमात्र चीज अधिक लचीली लगती है।

ऐसा लगता है कि एक लचीला और जटिल Redux ऐप बनाने का एकमात्र तरीका स्टोर में आईडी द्वारा अनुक्रमित सिस्टम में सभी संस्थाओं का होना है। कोई अन्य सरल दृष्टिकोण, जो कभी-कभी उदाहरणों में दिया जाता है, तेजी से अपनी सीमा तक पहुंच जाएगा। यह सूचकांक लगभग एक संबंधपरक डीबी का दर्पण है।

कार्रवाई के लिए 2d सरणी के दोनों सूचकांकों की आवश्यकता होगी

ऐसा लगता है जैसे आप सोच रहे हैं और कार्रवाई इस तरह दिखती है:

{type: 'increment', index:[0 5]}

लेकिन यह वास्तव में ऐसा दिखना चाहिए:

{type:'child', index: 0, action: {type: 'child', index: 5, action: {type: 'increment'}}}

इस तरह आप listOf(listOf(listOf(...listOf(counter)...))) हमेशा के लिए कर सकते हैं!

यह सब एल्म से आता है, बीटीडब्ल्यू। एल्म आर्किटेक्चर ट्यूटोरियल देखें

मैं पार्टी के लिए थोड़ा धीमा हूं, लेकिन मुझे नहीं पता कि यह "मिडलवेयर के साथ काम नहीं करता" कहां है? यदि आप @ccorcos के रूप में अनंत घोंसले की पेशकश कर रहे हैं, तो क्या आप घोंसले को संभालने के लिए मिडलवेयर को तार नहीं कर सकते? या हम विशेष रूप से redux-thunk के बारे में बात कर रहे हैं जहां नेस्टेड क्रियाओं का अर्थ अजीबता होगा?

मिडलवेयर को कैसे पता चलेगा कि कार्रवाई की व्याख्या करना है या नेस्टेड क्रियाओं की तलाश करना है?

आह।

@gaearon

नमस्ते।

मैं सकारात्मक नहीं हूं मैं इस मुद्दे पर संकल्प को समझता हूं और वास्तव में एक सरल उत्तर की सराहना करता हूं।

यदि आपके पास एक ही पृष्ठ पर घटक की एकाधिक प्रतियां हैं, तो क्या यह मिडलवेयर (और मूल रूप से अधिकांश Redux पारिस्थितिकी तंत्र) का उपयोग नहीं करता है? मैंने यह भी नहीं देखा कि किसी ने मल्टीरेड्यूसर सुझाव का जवाब दिया है या नहीं।

कोई स्पष्टीकरण मदद करेगा।

नहीं, यह संकल्प नहीं है। थ्रेड पृष्ठ पर किसी घटक की एकाधिक पहचान रखने के बारे में नहीं है। इसे लागू करने के लिए आप कार्रवाई में केवल एक आईडी पास कर सकते हैं। ऐसा करने के लिए धागा एक सामान्य कार्य लिखने के बारे में था_। जो दुर्भाग्य से मिडलवेयर की अवधारणा से टकराता है।

शुक्रिया।

सभी को नमस्कार,
हो सकता है कि मैंने इस समस्या को हल कर दिया हो, हालांकि मैं deku से अधिक react ^^ का उपयोग करना पसंद करता हूं

मुझे खुशी होगी अगर कोई मुझे इस प्रयोग के बारे में अपनी अंतर्दृष्टि देगा, खासकर taskMiddleware विचार के बारे में। @gaearon क्या आपके पास इसे देखने के लिए कुछ समय है? :जुबान:

काउंटरों की सूची

धन्यवाद!

बस यह स्पष्ट करना चाहता हूं कि इनमें से कोई भी समाधान प्रारंभिक स्थिति को संभालने का लक्ष्य नहीं रखता है।
क्या यह किसी तरह @gaearon हासिल किया जा सकता है? काउंटरों की प्रारंभिक सूची रखने के लिए उपरोक्त सूची रेड्यूसर की अनुमति देना?

यह समस्याग्रस्त क्यों होगा? मुझे लगता है कि आप चाइल्ड रिड्यूसर को undefined राज्य के साथ कॉल कर सकते हैं और उन मूल्यों का उपयोग कर सकते हैं।

जब स्टोर को पहले प्रेषण के साथ प्रारंभ किया जाता है तो मुझे उस सूची के लिए प्रारंभिक स्थिति रखने के लिए (मेरे आंतरिक तर्क के लिए) की आवश्यकता होती है, और यह काउंटरों की पूर्वनिर्धारित सूची होनी चाहिए (सूची के आइटम का प्रकार)

कुछ इस तरह?

export default function list(reducer) {
  return function (state = [

    // e.g. 2 counters with default values
    reducer(undefined, {}),
    reducer(undefined, {}),

      ], action) {
    const {
      index,
      action: innerAction
    } = action;
   // ...
  }
}

यदि आप चाहें तो आप इसे list के लिए भी तर्क दे सकते हैं

यह वास्तव में जटिल लगता है, इसलिए मेरे पास एक पृष्ठ पर एक ही घटक के एकाधिक हो सकते हैं।

मैं अभी भी Redux के आसपास अपना सिर लपेट रहा हूं, लेकिन कई स्टोर बनाना बहुत आसान लगता है, भले ही यह अनुशंसित Redux उपयोग पैटर्न न हो।

@deevus : इनमें से कुछ चर्चाओं को आपको डराने न दें। Redux समुदाय में बहुत से लोग हैं जो कार्यात्मक प्रोग्रामिंग की ओर बहुत उन्मुख हैं, और जबकि इस धागे में चर्चा की गई कुछ अवधारणाओं और इसी तरह के अन्य लोगों का मूल्य है, वे भी "परिपूर्ण" के लिए जाने का प्रयास करते हैं। , केवल "अच्छे" के बजाय।

सामान्य तौर पर, आपके पास एक पृष्ठ पर एक घटक के कई उदाहरण हो सकते हैं। इस चर्चा का उद्देश्य नेस्टेड घटकों की मनमानी रचना है, जो दिलचस्प है, लेकिन ऐसा कुछ भी नहीं है जिसे अधिकांश ऐप्स को करने की आवश्यकता होगी।

यदि आपके पास इससे परे विशिष्ट चिंताएं हैं, तो स्टैक ओवरफ़्लो आमतौर पर प्रश्न पूछने के लिए एक अच्छी जगह है। इसके अलावा, डिस्कॉर्ड पर रिएक्टिफ्लक्स समुदाय के पास चैट चैनलों का एक समूह है जो रिएक्ट और संबंधित तकनीकों पर चर्चा करने के लिए समर्पित है, और हमेशा कुछ लोग बात करने और मदद करने के लिए तैयार रहते हैं।

@markerikson धन्यवाद। मैं डिसॉर्डर पर रिएक्टिफ्लक्स से कुछ मदद लेने की कोशिश करूंगा।

इस पर अनुवर्ती:
मुझे अपनी परियोजना में रेड्यूसर का पुन: उपयोग करने का एक स्केलेबल तरीका मिला, यहां तक ​​​​कि रेड्यूसर के भीतर रेड्यूसर का पुन: उपयोग भी किया।

नेमस्पेस प्रतिमान

यह अवधारणा है कि कई "आंशिक" रेड्यूसर में से एक पर कार्य करने वाले कार्यों में "नेमस्पेस" संपत्ति होती है जो निर्धारित करती है कि कौन सा रेड्यूसर _all_ के विपरीत कार्रवाई को संभालेगा क्योंकि वे एक ही क्रिया type सुनते हैं (उदाहरण https://github.com/reactjs/redux/issues/822#issuecomment-172958967 में

हालांकि, जिन कार्यों में नामस्थान नहीं है, उन्हें अभी भी अन्य रेड्यूसर के भीतर सभी आंशिक रेड्यूसर के लिए प्रचारित किया जाएगा

मान लें कि आपके पास आंशिक रेड्यूसर A है और A(undefined, {}) === Sa की प्रारंभिक स्थिति के साथ और B(undefined, {}) === { a1: Sa, a2: Sa } की प्रारंभिक स्थिति के साथ एक रेड्यूसर B B(undefined, {}) === { a1: Sa, a2: Sa } जहां कुंजी a1 है a2 A के उदाहरण हैं।

['a1'] के नाम स्थान के साथ एक क्रिया (* नेमस्पेस हमेशा स्ट्रिंग्स के एरे का आदेश दिया जाता है जो आंशिक रेड्यूसर के लिए राज्य की कुंजी के समान होता है) B पर कास्ट निम्नलिखित परिणाम देगा

const action = {
  type: UNIQUE_ID,
  namespace: ['a1']
};

B(undefined, action) == { a1: A(undefined, action*), a2: Sa }

और बिना नामस्थान वाली क्रिया का काउंटर उदाहरण

const action = {
  type: UNIQUE_ID
};


B(undefined, action) == { a1: A(undefined, action), a2: A(undefined, action) }

चेतावनियां

• यदि A दी गई कार्रवाई को संभाल नहीं पाता है (यह रेड्यूसर को समाप्त कर देता है) तो इसे उसी स्थिति में वापस कर देना चाहिए, इसका मतलब है कि एक कार्रवाई के लिए p जो कि रेड्यूसर के लिए अप्राप्य है A B(undefined, p) का परिणाम $#$16 { a1: Sa, a2: Sa } B(undefined, p) होना चाहिए जो संयोग से B के लिए प्रारंभिक स्थिति के समान है
• आंशिक रेड्यूसर (ऊपर action* के रूप में चिह्नित) को पास की गई कार्रवाई को दायरे को कम करने के लिए उपयोग किए जाने वाले नाम स्थान से हटा दिया जाना चाहिए। इसलिए यदि कार्रवाई B को पास की गई थी तो वह { type: UNIQUE_ID, namespace: ['a1'] } थी, तो A तक की गई कार्रवाई A { type: UNIQUE_ID, namespace: [] } है
• इस संरचना को प्राप्त करने के लिए स्टोर में सभी रेड्यूसर को नेमस्पेसिंग क्रियाओं को संभालना चाहिए, यदि यह बिंदु पूरा हो जाता है तो आप कितने नामस्थानों का उपयोग कर रहे हैं और आप कितने आंशिक रेड्यूसर घोंसला कर सकते हैं इसकी कोई सीमा नहीं है

इसे प्राप्त करने के लिए मैं आपके रेड्यूसर में नेमस्पेस को संभालने के लिए कुछ छद्म कोड लेकर आया हूं। इसके लिए काम करने के लिए हमें पहले से पता होना चाहिए कि क्या कोई रेड्यूसर किसी क्रिया को संभाल सकता है और रेड्यूसर में मौजूद आंशिक रेड्यूसर की मात्रा।

(state = initialState, { ...action, namespace = [] }) => {
    var partialAction = { ...action, namespace: namespace.slice(1) };
    var newState;
    if (reducerCanHandleAction(reducer, action) and namespaceExistsInState(namespace, state)) {
        // apply the action to the matching partial reducer
        newState = {
            ...state,
            [namespace]: partialReducers[namespace](state[namespace], partialAction)
        };
    } else if (reducerCantHandleAction(reducer, action) {
        // apply the action to all partial reducers
        newState = Object.assign(
            {},
            state,
            ...Object.keys(partialReducers).map(
                namespace => partialReducers[namespace](state[namespace], action)
            )
        );
    } else {
        // can't handle the action
        return state;
    }

    return reducer(newState, action);
}

यह आप पर निर्भर करता है कि कैसे तय किया जाए कि रेड्यूसर पहले से कार्रवाई को संभाल सकता है या नहीं, मैं एक ऑब्जेक्ट मैप का उपयोग करता हूं जिसमें क्रिया प्रकार कुंजी हैं और हैंडलर फ़ंक्शन मान हैं।

मुझे खेल में थोड़ी देर हो सकती है लेकिन मैंने कुछ सामान्य-उद्देश्य वाले रेड्यूसर लिखे हैं जो मदद कर सकते हैं:
https://gist.github.com/crisu83/42ecffccad9d04c74605fbc75c9dc9d1

मुझे लगता है कि म्यूटिल्रेड्यूसर एक महान कार्यान्वयन है

@jeffhtli मल्टीरेड्यूसर एक अच्छा समाधान नहीं है क्योंकि यह अपरिभाषित मात्रा में रेड्यूसर की अनुमति नहीं देता है, इसके बजाय यह आपको एक स्थिर रेड्यूसर सूची बनाने के लिए कहता है
इसके बजाय मैंने घटकों के प्रत्येक उदाहरण के लिए यूयूआईडी का उपयोग करके इस मुद्दे को हल करने के लिए एक छोटी परियोजना बनाई और प्रत्येक यूयूआईडी के लिए एक अद्वितीय स्थिति बनाई
https://github.com/eloytoro/react-redux-uuid