Yayılması Operatör Redux/ES6 tabanlı numunenin

Question

Dan Abramov tarafından yayınlanır Redux çevrimiçi öğreticiler anlamaya çalışıyorum için çalışmıyor. Şu anda aşağıdaki örneğe duyuyorum: sözdizimi çalışmıyor ardından todoReducer fonksiyonu içinde,

// Individual TODO Reducer 
const todoReducer = (state, action) => { 
    switch(action.type) { 
    case 'ADD_TODO': 
     return { 
      id: action.id, 
      text: action.text, 
      completed: false 
      }; 
    case 'TOGGLE_TODO': 
     if (state.id != action.id) return state; 

     // This not working 
     /* 
     return { 
     ...state, 
     completed: !state.completed 
     }; 
     */ 

     //This works 
     var newState = {id: state.id, text: state.text, completed: !state.completed}; 
     return newState; 
    default: 
     return state; 
    } 
}; 

//TODOS Reducer 
const todos = (state = [], action) => { 
     switch(action.type) { 
     case 'ADD_TODO': 
     return [ 
      ...state, 
      todoReducer(null, action) 
     ]; 
     case 'TOGGLE_TODO': 
     return state.map(t => todoReducer(t, action)); 
     default: 
     return state; 
    } 
}; 

//Test 1 
const testAddTodo =() => { 
    const stateBefore = []; 

    const action = { 
     type: 'ADD_TODO', 
     id: 0, 
     text: 'Learn Redux' 
    }; 

    const stateAfter = [{ 
    id: 0, 
    text: "Learn Redux", 
    completed: false 
    }]; 

    //Freeze 
    deepFreeze(stateBefore); 
    deepFreeze(action); 

    // Test 
    expect(
    todos(stateBefore, action) 
).toEqual(stateAfter); 
}; 

//Test 2 
const testToggleTodo =() => { 
    const stateBefore = [{id: 0, 
    text: "Learn Redux", 
    completed: false 
    }, { 
    id: 1, 
    text: "Go Shopping", 
    completed: false 
    }]; 

    const action = { 
     type: 'TOGGLE_TODO', 
     id: 1 
    }; 

    const stateAfter = [{ 
    id: 0, 
    text: "Learn Redux", 
    completed: false 
    }, { 
    id: 1, 
    text: "Go Shopping", 
    completed: true 
    }]; 

    //Freeze 
    deepFreeze(stateBefore); 
    deepFreeze(action); 

    // Expect 
    expect(
    todos(stateBefore, action) 
).toEqual(stateAfter); 
}; 

testAddTodo(); 
testToggleTodo(); 
console.log("All tests passed"); 

Sayı geçerli:

İşte Reducer composition with Arrays

Yukarıdaki örnekten şu benim uygulama kodu:

return { 
     ...state, 
     completed: !state.completed 
     }; 

Ben Firefox sürüm 44.0 kullanıyorum ve bana konsolunda aşağıdaki hata gösteriyor:

Invalid property id 

Şimdi, Firefox'un şu anki sürümünün Spread operatörünü desteklemesi gerektiğini düşünüyorum. Eğer değilse, bu sözdizimini desteklemek için bağımsız bir Polyfill eklemek için herhangi bir yolu var mı? İşte

da JSFiddle

Answer 1

The object spread syntax is not supported in most browsers at the minute olduğunu. ES7'ye (ES2016) ek olarak önerilmiştir. Bildiğim kadarıyla, sadece bir işlev çağrısı olmaktan ziyade yeni bir sözdizimi kullandığı için, onu doldurmanın bir yolu yoktur.

Bu süre zarfında iki seçenek vardır. Bu da çoğu tarayıcıda polyfilled gerekecektir rağmen

Object.assign({}, state, { 
    completed: !state.completed 
}); 

- a good example one is available on MDN veya bir üçüncü şahıs kütüphanenin sürümünü kullanabilirsiniz:

1) öylesine gibi nesnenin güncellenmiş bir sürümünü oluşturmak için Object.assign kullanın , like the one in lodash. 2) Babel gibi transpiling araçlarını kullanarak kodunuzu daha yeni bir sözdizimi ile yazmanızı ve daha sonra tüm tarayıcılarda çalışan bir sürüme dönüştürmenizi sağlar.

Answer 2

Çok dilli sözdizimi yapamazsınız. Mevcut tarayıcılarda yürütmek istiyorsanız, eski bir JavaScript sürümüne derlemek için babel gibi bir şey kullanmanız gerekir.

https://babeljs.io/

Answer 3

Babel hala sorun yaşıyor kullanan kişilerin, bu özellik kutudan çıktığı Babel ile mevcut olmayabilir, bir eklenti eklemek gerekebilir:

ile http://babeljs.io/docs/plugins/transform-object-rest-spread/

sonra güncelleme .babelrc

"eklentiler": [ "dönüşümü-nesne-dinlenme-yayılmasını"] bütünlüğü için