神刀安全网

Get Stated with React and Riotux – Complete Guide

What is riotux?

riotux is an application architecture for centralized state management for javascript applications. It is inspired by Flux and Redux, but with simplified concepts.

  • Component -> Action -> Mutation -> State -> Component

Go toriotux.

The component triggers action calls. Actions dispatch mutations that change the state. Changes in state flow from the store back into the component.

React Count Example

Demo.

In this app, we has a store and the React component. The store is basically a container that holds your application state.

The Store

There are two things that makes a riotux store different:

  • The store are reactive. Your component can observe changes in the store state, and when the state is changed, your component handler function will called.

  • You cannot directly mutate the store’s state. The only way to change a store’s state is by explicitly dispatching mutations.

Let’s create our store.

// riotux-store var store = riotux.Store({   state: {     count: 0   },   mutations: {     increment: function ( state, previous ) {       state.count += 1;       console.log('State #count changed. -> Previous value: ', previous, '. -> New state value:', riotux.getter('count'))     }   } });

We have a state called count and the mutations, that are an object that contains functions that will be change the state. Use the method called dispatch to trigger the store mutation function, to change the state.

The mutations are essentially events: each mutation has a name and a callback. In riotux the callback function will receive the state as the first argument.

Actions

The actions are just functions that dispatch mutations. All actions recieves the store as frist argument. The actions will be called from components.

Our action:

// riotux actions var actions = riotux.Actions({   increment_count: function ( store ) {     console.log('Button pressed. The state #count will be change.');     store.dispatch('increment', riotux.getter('count'));   } });

Component

To recieve the new state value, you need to use riotux.subscribe(component, [state], handler) . component is your component (this), and state is an array with all states that you want to observe changes. When the state changes, yout handler function will be triggered.

Your handler function recieves the state_name as first argument and the value as second argument.

The riotux.action recieves the state that you wants to change as first argument, the mutation event name as the second argument and the values you nedd to pass like arguments to the mutation callback.

Get a state value

To get the state value, we use riotux.getter(state_name) .

// React Component     var Count = React.createClass({       // the store state       getInitialState: function ( ) {         return {           count: riotux.getter('count')         }       },        componentWillMount: function () {         var self = this;         // subscribe the component to observe the count state changes         riotux.subscribe(this, 'count', function ( state_name, value ){             // update the component, because the state change             self.forceUpdate();           });       },        componentWillUpdate: function ( ) {         // the state changed, recieves the new state and re-render         this.state.count = riotux.getter('count');       },        render: function() {         return React.DOM.p(null, 'Count: ' + this.state.count);       }     });      ReactDOM.render(       React.createElement(Count),       document.getElementById('container')     );

As you can see, when the state changes on your store, you can update your component. You just recieve the state using riotux.getter(); when your component updates.

Conclusion

riotux is inspired in Redux and Flux concepts, but more simplest. Is easely to get started and you can use riotux now. Visit theriotux documentation and I hope that riotux can helps you. Star riotux if you liked :)

Thanks!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Get Stated with React and Riotux – Complete Guide

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址