data structures - The Elm / functional way of passing props to components -
i'm new elm , functional programming. i'm building expense tracking app has model this:
initialmodel = { expensetransactions = [ { date = date.fromstring "2016/10/23" , transactions = [ { id = 1 , amount = 17.54 , description = "stuff" , category = 3 } , { id = 2 , amount = 15.0 , description = "things" , category = 4 } ] } ], expensecategories = dict.fromlist [ ( 1, "rent" ), ( 2, "groceries" ), ( 3, "eating out" ) ] }
in view, i'm using renderexpensestable
function, in turn calls renderexpensesforoneday
function, in turns calls renderexpensesrow
function.
what want keep storing transaction's category
number, , reference name view doing expensecategories[transaction.category]
in other languages. (i if stored category string "groceries"
problem moot, reason want store category
number in model , reference separately user able edit category names, , don't want have update every single transaction in model every time happens, have if stored category
string.)
i've realised have pass expensecategories
view
method down through each level (renderexpensestable
, renderexpensesforoneday
, etc.).
renderexpenserow : expensetransaction -> list string -> html msg renderexpenserow transaction categories = -- ... row stuff ... renderexpensesforoneday : expensesforoneday -> list string -> html msg renderexpensesforoneday day categories = let daytransactions = list.map2 renderexpenserow day.transactions categories in -- ... yada yada ... daytransactions renderexpensestable : list expensesforoneday -> list string -> html msg renderexpensestable days categories = let rendereddays = list.map2 renderexpensesforoneday days (dict.values categories) in div [ class "expenses-table" ] rendereddays
this doesn't work, , think it's because shouldn't trying use list.map2
this. succeeding map
before tried pass in categories, , attempt pass them in along other stuff (like props in react).
what's ideal "elm way" kind of thing? if can't access model directly, , don't have react-style props, how should deal situations there 2 different bits of model want reference expensetransactions
, expensecategories
?
why not store separate categories structure in selfsame model?
something like:
type model = model { expensetransactions: tl , expensecategories: dict.fromlist [ ( 1, "rent" ), ( 2, "groceries" ), ( 3, "eating out" ) ] }
finally view functions take mega model:
viewwhatever : model -> html msg viewwhatever = ...
i still don't how pass model through. each render function connects next via list.map, , since takes lists arguments, how model passed through
you can modify render functions take model first argument. example:
renderexpensesforoneday : model -> expensesforoneday -> list string -> html msg ... renderexpensestable : model -> list expensesforoneday -> list string -> html msg ... list.map2 (renderexpensesforoneday model) days (dict.values categories)
note above how in last sentence pass curried function (renderexpensesforoneday model
) list.map2.
Comments
Post a Comment