Bộ giảm tốc Redux khởi tạo cùng một khóa trạng thái

Question

Tôi đang rối tung xung quanh với 'simplest-redux-example' on github và tôi đã thêm bộ giảm tốc thứ hai làm giảm state.count. Nếu tôi có các bộ giảm gia tăng và giảm trong câu lệnh case switch, nó hoạt động tốt. Bài tập tôi muốn thực hiện là chia nhỏ các phần nhỏ thành nhiều phần mô-đun nhất có thể. Mã này ném một lỗi nói rằng số lượng là không xác định.

import React from 'react'; 
import { createStore, combineReducers } from 'redux'; 
import { Provider, connect } from 'react-redux'; 

// React component 
class Counter extends React.Component { 
    render(){ 
    const { value, onIncreaseClick, onDecreaseClick } = this.props; 
    return (
     <div> 
     <span>{value}</span> 
     <button onClick={onIncreaseClick}>Increase</button> 
     <button onClick={onDecreaseClick}>Decrease</button> 
     </div> 
    ); 
    } 
} 

// Action: 
const increaseAction = {type: 'increase'}; 
const decreaseAction = {type: 'decrease'}; 

// Reducer: 
function counter(state, action) { 
    let count = state.count; 
    switch(action.type){ 
    case 'increase': 
     return {count: count+1}; 
    default: 
     return state; 
    } 
} 
function decrementer(state, action) { 
    let count = state.count; 
    switch(action.type){ 
    case 'decrease': 
     return {count: count -1}; 
    default: 
     return state; 
    } 
} 
const rootReducer = combineReducers({ 
    counter, 
    decrementer 
}) 

// Store: 
let store = createStore(rootReducer, {count: 0}); 

// Map Redux state to component props 
function mapStateToProps(state) { 
    console.log("mapStatetoProps heyyyy"); 
    return { 
    value: state.count 
    }; 
} 

// Map Redux actions to component props 
function mapDispatchToProps(dispatch) { 
    console.log("mapDispatchtoProps heyyyy"); 
    return { 
    onIncreaseClick:() => dispatch(increaseAction), 
    onDecreaseClick:() => dispatch(decreaseAction) 
    }; 
} 

// Connected Component: 
let App = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Counter); 

React.render(
    <Provider store={store}> 
    {() => <App />} 
    </Provider>, 
    document.getElementById('root') 
); 

Answer 1

Các gia giảm truyền cho combineReducers có khác nhau mảnh của đối tượng nhà nước.

Bộ giảm tốc kết quả gọi mọi bộ giảm tốc con và thu thập kết quả của chúng thành một đối tượng trạng thái duy nhất. Hình dạng của đối tượng trạng thái khớp với các phím của số reducers được chuyển.

(tôi nhấn mạnh)

Vì vậy, đối tượng trạng thái nội bộ sẽ trông như thế

{ 
    counter: result of passing `state.counter` into counter reducer 
    decrementer: result of passing `state.decrementer` into decrementer reducer 
} 

Điều này giống như việc có cửa hàng riêng biệt trong một ứng dụng thông, trong đó mỗi cửa hàng đều hoạt động riêng của mình "mảnh" của trạng thái ứng dụng toàn cầu.

Vì bạn thực sự muốn hai gia giảm chúng để làm việc trên cùng phần của đối tượng trạng thái, bạn thực sự muốn một cái gì đó giống như reduce-reducers, mặc dù nó rất dễ dàng để thực hiện chính mình-chỉ cần vượt qua trạng thái thành từng giảm lần lượt, giảm trạng thái ban đầu với trạng thái mới từ mỗi bộ giảm tốc.

Trong thực tế, nó là đơn giản như vậy, việc thực hiện chỉ là một vài dòng:

export default function reduceReducers(...reducers) { 
    return (previous, current) => 
    reducers.reduce(
     (p, r) => r(p, current), 
     previous 
    ); 
} 

và rootReducer của bạn sẽ là

const rootReducer = reduceReducers(counter, decrementer); 

Answer 2

Bạn đang rất gần! Điều bắt được là khi bạn sử dụng kết hợp các bộ lọc, nó thực sự tách "trạng thái" sao cho trạng thái của các bộ giảm mà bạn nạp vào là các thuộc tính trên đối tượng "trạng thái".

Như vậy, để chúng ăn các thông số mặc định như sau: let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});