用lodash更新json

Question

实际上我需要使用json对象(React和lodash)完全处理mysite前端.

我通过ajax调用获取初始数据,我们说,

starred[] //returns empty array from server

并且当用户点击星形按钮时添加新的json,

starred.push({'id':10,'starred':1});

如果用户再次点击,则已加星标应为0

current_star=_findWhere(starred,{'id':10});
_.set(curren_star,'starred',0);

但在做console.log时

console.log(starred); //returns
[object{'id':10,'starred':0}]

但实际上当重复时全局json没有更新,而json正在执行一些其他操作,就像,

console.log(starred); //returns
[object{'id':10,'starred':1}]

如何更新全局,我希望一旦我改变了json,它应该永远改变.我应该知道建议一些更好的框架来处理json更容易.

谢谢!

Answer 1

使用数组很复杂而且通常很混乱。使用对象创建索引通常要容易得多。您可以尝试如下基本状态管理器：

// This is your "global" store. Could be in a file called store.js
// lodash/fp not necessary but it's what I always use.
// https://github.com/lodash/lodash/wiki/FP-Guide
import { flow, get, set } from 'lodash/fp'

// Most basic store creator.
function createStore() {
  let state = {}
  return {
    get: path => get(path, state),
    set: (path, value) => { state = set(path, value, state) },
  }
}

// Create a new store instance. Only once per "app".
export const store = createStore()

// STARRED STATE HANDLERS
// Send it an id and get back the path where starred objects will be placed.
// Objects keyed with numbers can get confusing. Creating a string key.
const starPath = id => ['starred', `s_${id}`]
// Send it an id and fieldId and return back path where object will be placed.
const starField = (id, field) => starPath(id).concat(field)

// import to other files as needed
// Add or replace a star entry.
export const addStar = item => store.set(starPath(item.id), item)
// Get a star entry by id.
export const getStar = flow(starPath, store.get)
// Get all stars. Could wrap in _.values() if you want an array returned.
export const getStars = () => store.get('starred')
// Unstar by id. Sets 'starred' field to 0.
export const unStar = id => store.set(starField(id, 'starred'), 0)

// This could be in a different file.
// import { addStar, getStar, getStars } from './store'

console.log('all stars before any entries added:', getStars()) // => undefined

const newItem = { id: 10, starred: 1 }
addStar(newItem)
const star10a = getStar(10)
console.log('return newItem:', newItem === star10a) // => exact match true
console.log('star 10 after unstar:', star10a) // => { id: 10, starred: 1 }
console.log('all stars after new:', getStars())

// Each request of getStar(10) will return same object until it is edited.
const star10b = getStar(10)
console.log('return same object:', star10a === star10b) // => exact match true
console.log('return same object:', newItem === star10b) // => exact match true

unStar(10)
const star10c = getStar(10)
console.log('new object after mutate:', newItem !== star10c) // => no match true
console.log('star 10 after unstar:', getStar(10)) // => { id: 10, starred: 0 }
console.log('all stars after unstar:', getStars())